jQuery JSON .each 错误

Question

我有一个如下所示的 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 对象中获取详细信息，并将它们添加到

前面，

我当前正在尝试的代码看起来像这样，并且遇到问题

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 函数中访问它的方式有关。

谁能发现哪里出了问题吗？

Answer 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);
});

需要注意的一些事项：

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

Answer 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);
});

Answer 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);