Печать 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

вот мой JQuery:

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

по какой-то причине на моем jsFiddle, который находится прямо здесь: http://jsfiddle.net/gAWTV/

Он просто выглядит пустым. У кого-нибудь есть идеи? Я озадачен ...

--- EDIT ---

Что я хотел бы сделать, это все, выход в свои 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, чтобы построить свой список вместо добавления новой дивы к существующему в каждом цикле - что повышает производительность.

После О.П. редактирования:

Изменить последний фрагмент кода на:

$.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