1

我有一个看起来像这样的 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 函数中访问它的方式有关。

谁能发现哪里出错了？

4

3 回答 3

3 
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，因此最后，您只有列表中最后一个列表元素的内容。
于 2010-04-28T23:34:20.240 回答
1

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

其次，您的代码编写方式，它会不断覆盖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);
});
于 2010-04-28T23:39:17.010 回答
0

我相信你应该使用：

$(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);
于 2010-04-28T23:28:15.177 回答