印刷JSON對象的jQuery到HTML

Question

我有一個JSON對象，看起來像這樣：

var content = '[{"title":"John Apple","lastname":"Apple"}, 
{"title":"Kumar Patel","lastname":"Patel"}, 
{"title":"Michaela Quinn","lastname":"Quinn"}, 
{"title":"Peyton Manning","lastname":"Manning"}, 
{"title":"John Doe","lastname":"Doe"}, 
{"title":"Jane Lee","lastname":"Lee"}, 
{"title":"Dan McMan","lastname":"McMan"}, 
{"title":"Yu Win","lastname":"Win"}]'; 

，我試圖用jQuery來編輯它在我div標籤與content-view

的ID顯示

這裏是我的jQuery：

$.each(content, function(t, l){ 
    $('#view-content').appendTo('<div id = "' + l + '">' + t + '</div>'); 
}); 

有關我的jsfiddle，由於某種原因，這是在這裏：http://jsfiddle.net/gAWTV/

它只是結果空白。有沒有人有任何想法？我難倒...

---編輯---

我想要做的就是擁有的一切輸出到自己的div標籤是這樣的：

<div id="Apple">John Apple</div> 
<div id="Patel">Kumar Patel</div> 
<div id="Quinn">Michaela Quinn</div> 
etc... 

Answer 1

你content是一個字符串，而不是一個對象數組。

您首先需要將它作爲一個數組存儲，所以擺脫單引號。

var content = [{"title":"John Apple","lastname":"Apple"}, 
{"title":"Kumar Patel","lastname":"Patel"}, 
{"title":"Michaela Quinn","lastname":"Quinn"}, 
{"title":"Peyton Manning","lastname":"Manning"}, 
{"title":"John Doe","lastname":"Doe"}, 
{"title":"Jane Lee","lastname":"Lee"}, 
{"title":"Dan McMan","lastname":"McMan"}, 
{"title":"Yu Win","lastname":"Win"}]; 

除非有理由把它作爲字符串存儲嗎？那麼你需要parse吧。

var content_object = JSON.parse(content); 

然後你可以運行你的代碼。不過，我認爲你想要「stringify」你的JSON。如果是這種情況，您還需要將t與l對換，因爲l是對象。最後，你想要append，而不是appendTo。後者將主題附加到您指定的目標上，而不是相反方向（因此，在您的情況下，appendTo將#view-content附加到您構建的div上，這不起作用）。

$.each(content, function(t, l){ 
    $('#view-content').append('<div id = "' + t + '">' + JSON.stringify(l) + '</div>'); 
}); 

JSFiddle

最後的評論，我會用document fragments建立您的列表，而不是追加新的div到現有的在每個循環 - 這可以提高性能。

OP編輯後：

改變最後片段到：

$.each(content, function(t, l){ 
    $('#view-content').append('<div id = "' + l.lastname + '">' + l.title + '</div>'); 
}); 

Updated JSFiddle

Answer 2

試試這個：

var content = [{"title":"John Apple","lastname":"Apple"}, 
{"title":"Kumar Patel","lastname":"Patel"}, 
{"title":"Michaela Quinn","lastname":"Quinn"}, 
{"title":"Peyton Manning","lastname":"Manning"}, 
{"title":"John Doe","lastname":"Doe"}, 
{"title":"Jane Lee","lastname":"Lee"}, 
{"title":"Dan McMan","lastname":"McMan"}, 
{"title":"Yu Win","lastname":"Win"}]; 

$.each(content, function(t, l){ 

$('<div/>',{ 
    id: l, 
    text:t }).appendTo('#view-content'); 

}); 

DEMO