jquery - 在jQuery中从JSON添加div？

Question

我从 JSON 格式 JSON 的页面中获取一些数据：{ 'name' : 'maverick', Image : 'Jason' }

我现在需要获取这些值并将它们添加到#main div。

        <div id="main">
        <div class="a"> name: Eithan <img src="img/Eithan.jpg" /> <div>
        <div class="a"> name: Emma <img src="img/Emma.jpg" /> <div>
       </div>

如果 JSON 中有多个对象，我该如何在 jQuery 中执行此操作？

Answer 1

您可以通过使用$.getJSON()函数来做到这一点。

$.getJSON("link/to/json", function(data) {
    $.each(data, function(i, item) {
        $('#main').append('<div class="a"> name: ' + item.name + ' <img src="img/' + item.image + '.jpg" /></div>');
    });
});

Answer 2

遍历 JSON 并附加一个 div：

$.each(data, function(i, item) {
    $('#main').append('<div class="a"> name: ' + item.name + ' <img src="img/' + item.image + '.jpg" /></div>');
); 

Answer 3

嗯，如果你把 JSON 放在一个数组中，就像这样（适用于多个项目）

[
    {'name':'maverick', 'image':'Jason'},
    {'name':'Darlig', 'image':'Rose'}
]

（注意将所有内容都包含在其中[并]表示 JSON 数组）

现在你可以只使用一个 for 循环

for (var i = 0; i < response.length; i++) {
    var currentPerson = response[i];
    var currentName = currentPerson.name;
    var currentImage = currentPerson.image;

    //use currentName and currentImage to add to the DOM
}