getJSON renvoie undefined

Question

J'essaie de créer un fil de nouvelles automatique sur un site Web de projet, où tous les messages sont placés dans un fichier JSON et ensuite formatés sur la page de nouvelles en conséquence. J'ai finalement compris comment obtenir l'analyseur JSON pour montrer QUELQUE CHOSE mais que quelque chose est juste un tas de bits "non définis" partout dans la page. Qu'est-ce que je fais mal?

Les jquery/html snippet

<script>  
    $.getJSON("js/news.json", function (data) { 
     $.each(data.posts, function (val) { 
       var title = val.title; 
       var date = val.date; 
       var content = val.content; 
       $("#newscontainer").append('<div><h1>' + title + '</h1><h2>' + date +  '</h2><p>' + content + '</p></div>'); 
     }); 
    }); 
</script> 
<div id='newscontainer'> 
</div> 

L'JSON snippet

{ 
"posts": [ 
    { 
     "title": "title1", 
     "date": "8302014", 
     "content": "LotsoftextLotsoftext" 
    }, 
    { 
     "title": "title2", 
     "date": "8312014", 
     "content": "CopiousquantitiesoftextCopiousquantitiesoftext" 
    }, 
    { 
     "title": "title3", 
     "date": "8322014", 
     "content": "onlyalittletext" 
    } 
] 
} 

Answer 1

val dans votre code est le index, vous devez utiliser le deuxième argument de la fonction de rappel.

$.each(data.posts, function (index, val) { 

Vous pouvez également utiliser le mot-clé this.

Answer 2

Essayez celui-ci:

var post_title = val.title; 
var post_date = val.date; 
var post_content = val.content; 

var divTag = document.createElement("div"); 
newscontainer.appendChild(divTag); 

var h1Tag = document.createElement("h1"); 
h1Tag.innerHTML = post_title; 
newscontainer.appendChild(h1); 

var h2Tag = document.createElement("h2"); 
h2Tag.innerHTML = post_date; 
newscontainer.appendChild(h2); 

var pTag = document.createElement("p"); 
pTag.innerHTML = post_content; 
newscontainer.appendChild(p); 

Answer 3

Vous pouvez utiliser la each() fonction sur votre liste:

$(data.posts).each(function() { 
     var $this = this; 
     $("#newscontainer").append('<div><h1>' + $this.title + '</h1><h2>' + $this.date +  '</h2><p>' + $this.content + '</p></div>'); 
    });