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对象中获取细节，并将它们添加到一个<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函数中访问它的方式有关。

有人能发现哪里出了问题吗？

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)，并确保看到对象数组)。
2. 您确定item.sport_title将为空吗？我更改了它以检查它的字符串...
3. 它是更快的构建一个字符串的列表元素，然后将它添加到DOM的末尾，而不是添加元素到DOM。
4. Doing 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()来设置清单，因为这将覆盖已经存在的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);