用jQuery将JSON对象打印为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);

然后你就可以运行你的代码了。但是，我认为您想要"绞线“您的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

最后，我将使用文件片段来构建您的列表，而不是将新的div附加到每个循环中现有的divs -这将提高性能。

OP编辑后的：

将最后一个片段更改为：

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

更新的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');

});

演示