jQuery JSON .each 错误答案

【问题标题】：jQuery JSON .each errorjQuery JSON .each 错误
【发布时间】：2010-04-28 23:11:35
【问题描述】：

我有一个像这样的 JSON 对象。

[
    {
        "id" : "23", 
        "event_id" : "0", 
        "sport_title" : null, 
        "event_title" : null, 
        "title" : "Under 1 day!", 
        "content" : "It\\'s all hotting up and battle commences in under one day!", 
        "link" : ""
    },

    {
        "id" : "20", 
        "event_id" : "0",
        "sport_title" : null, 
        "event_title" : null,
        "title" : "Getting Exciting", 
        "content" : "Less than two days till it all kicks off, with cricket....", 
        "link" : ""
    }
]

我正在尝试从这个 JSON 对象中获取详细信息并将它们添加到 <ul>

我目前正在尝试的代码看起来像这样并且有问题

var writeup_list = writeuplist;

$.getJSON('../json/getWriteups.json', function(data) {

    $.each(data.items, function(i, item) {
        writeup_list.html(function() {
            var output;
            output = '<li><a href="/writeups/index.php#writeup_' + item.id + '">';
            if(item.sport_title != null) {
                output += item.sport_title + ' - ';
            }
            output += item.title + '</a></li>';

            return output;
        });
    });

});

writeuplist 只是 ul 对象。

我还担心会覆盖列表中已有的信息或只是再次添加。不想继续添加相同的数据。有什么好的方法可以避免这种情况？

我似乎在从 JSON 文件中获取数据时遇到了问题，我认为这与尝试在 .each 函数中访问它的方式有关。

谁能发现哪里出错了？

【问题讨论】：

标签： jquery json getjson each

【解决方案1】：

jQuery.getJSON('../json/getWriteups.json', function(data) {
    var output = '';

    jQuery.each(data.items, function (index, item) {
      output += '<li><a href="/writeups/index.php#writeup_' + item.id + '">';

      if (typeof item.sport_title == "string") {
        output += item.sport_title + ' - ';
      }

      output += item.title + '</a></li>';
    });

    writeup_list.html(output);
});

注意事项：

您确定 data.items 是访问阵列的正确方法吗？（尝试在回调中执行 alert(data.items)，并确保您看到 [object Array]）。
您确定item.sport_title 将为空吗？我更改它以检查它的字符串...
在执行过程中构建列表元素的字符串，然后将其添加到最后的 DOM 比在执行过程中将元素添加到 DOM 更快。
执行element.html(str) 将替换当前内容。您的示例在每次迭代时都替换了当前的 html，因此最后，您将只有列表中最后一个列表元素的内容。

【讨论】：

data.items 是正确的，结果只是数据。现在要在计时器中测试这段代码，看看它是否添加了相同的东西......我不希望它这样做！

【解决方案2】：

首先，您应该只使用data 而不是data.items。在您的情况下，返回的数据是一个数组，因此您想对其进行迭代。

第二，你的代码写法，它会一直覆盖writeup_list的内容。相反，构建 html 字符串，然后将其设置在末尾：

$.getJSON('../json/getWriteups.json', function(data) {
    var output = '';    
    $.each(data, function(i, item) {
        output += '<li><a href="/writeups/index.php#writeup_' + item.id + '">';
        if(item.sport_title != null) {
            output += item.sport_title + ' - ';
        }
        output += item.title + '</a></li>';
    });

    writeup_list.html(output);
});

【讨论】：

【解决方案3】：

我相信你应该使用：

$(data.items).each(function(i, item) {

但你也可以使用标准的 javascript 循环来做同样的事情：

for (var i = 0; i < data.items.length; i++) {
    var item = data.items[i];

另外，你不想使用.html() 来设置你的lis，因为这会覆盖已经存在的html。请改用.append()：

var output;
output = '<li><a href="/writeups/index.php#writeup_' + item.id + '">';
if(item.sport_title != null) {
    output += item.sport_title + ' - ';
}
output += item.title + '</a></li>';

writeup_list.append(output);

【讨论】：