javascript - 使用 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 标记中，其 id 为 content-view

这是我的 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

您的内容是一个字符串，而不是一个对象数组。

你首先需要将它存储为一个数组，所以去掉单引号。

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 附加到现有的 div - 这样可以提高性能。

OP 编辑​​后:

将最后一段更改为:

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

Updated JSFiddle