添加到jQuery中的HTML标记在网页上显示未定义的代码

我正在使用jQuery从JSON txt文件中检索特定数据并将其显示在网页上。数据按预期显示在页面上，但需要使用HTML/CSS进行格式化。当我添加像p或div这样的HTML标签时，页面上会多次显示“undefined”。这可能很简单，我忽略了，但到目前为止，我从其他帖子尝试过的所有建议都无效。我使用jQuery，1.9.1.min，这是代码：添加到jQuery中的HTML标记在网页上显示未定义的代码

$(document).ready(function(){ 
$.getJSON('cache/bitly-click-rate.txt', function(data){ 
     $.each(data, function(index, item){ 
       $('#bitly-click-rate').append('<p>' + item.phrase + '</p><p>' + item.rate + '</p>'); 
     }); 
    }) 
})

这里是什么显示的网页截图： enter image description here

我已经签了JSON代码和它是有效的。这里是JSON代码不过，如果它可以帮助：

{"status_code": 200, "data": {"phrase": "obama", "rate": 0.062096999999999999, "lag": 5, "time": 1360459793}, "status_txt": "OK"}

我希望有人能告诉我什么，我在这里失踪？在此先感谢您的帮助。

更新： 感谢大家的快速响应。我更新了jQuery代码，因为问题似乎是因为返回的JSON数据是单个对象而不是数组。我使用的jQuery代码是用于JSON数组。我已经更新了基于弗拉德的答案jQuery代码：

$(document).ready(function() { 
    $.getJSON('cache/bitly-click-rate.txt', function(data) { 
       $('#bitly-click-rate').append('<p> Phrase: ' + data.phrase + '</p>' + '<p> Rate: ' + data.rate + '</p>'); 
    }); 
});

的数据仍显示为未定义网页上，这里是截图： enter image description here

在我看来，上面的代码应该工作。我一直在研究，但到目前为止，大部分代码建议都是针对JSON数组的。请让我知道，如果你有任何想法，为什么更新的代码不起作用。谢谢！

来源

2013-02-11 Janet Wagner

灿你请在这种情况下发布JSON的样子？你确定第一个和第三个对象实际上有'phrase'和'rate'属性吗？ – 2013-02-11 00:52:53

嗨，弗拉德...我编辑了这篇文章，包括JSON代码。物业在那里。谢谢！ – 2013-02-11 01:16:29

请参阅我的编辑 - 由于您的JSON对象有一个名为'data'的属性，并且您将变量'data'传递给AJAX回调函数，所以事情会变得混乱。我将结果重命名为'result'，并将正确的路径添加到结果中的'data'属性中。 – 2013-02-11 20:19:23

你返回的JSON数据是一个单一的对象，而不是一个数组：

{"status_code": 200, "data": {"phrase": "obama", "rate": 0.062096999999999999, "lag": 5, "time": 1360459793}, "status_txt": "OK"}

所以没有必要在这种情况下使用each。你只可以直接访问属性：

$.getJSON('cache/bitly-click-rate.txt', function(result){ 
    $('#bitly-click-rate').append('<p>' + result.data.phrase + '</p><p>' + result.data.rate + '</p>'); 
})

如果你的JSON有项目的数组，像这样：

{ 
    "status_code": 200, 
    "data": { 
     "phrases": [ 
      { 
       "phrase1": "obama", 
       "rate": 0.062097, 
       "lag": 5, 
       "time": 1360459793 
      }, 
      { 
       "phrase2": "clinton", 
       "rate": 0.062097, 
       "lag": 5, 
       "time": 1360459793 
      } 
     ] 
    }, 
    "status_txt": "OK" 
}

只有这样，你就会有一些遍历：

$.getJSON('cache/bitly-click-rate.txt', function(result){ 
    $.each(result.data.phrases, function(index, item){ 
     $('#bitly-click-rate').append('<p>' + item.phrase + '</p><p>' + item.rate + '</p>'); 
    }); 
})

来源

2013-02-11 01:59:27

不是'data.data.phrase'，因为包含属性'phrase'的对象在它的子节点上（为了增加一些混淆，命名为'data '）水平？ – 2013-02-11 16:19:13

@FloydPink，你是对的 - 我更新了代码以反映这一点。绝对令人困惑。 – 2013-02-11 20:16:20

试试这个：

$(document).ready(function(){ 
$.getJSON('cache/bitly-click-rate.txt', function(data){ 
     $.each(data.data, function(index, item){ 
       $('#bitly-click-rate').append('<p>' + item.phrase + '</p><p>' + item.rate + '</p>'); 
     }); 
    }) 
})

因为你是感兴趣的显示对象是（我猜），而不是在回调（data）顶级对象，而是物业名为data它。

来源

2013-02-11 01:18:58

您目前正在按元素遍历返回的JSON数据元素。第一个元素是：

data.status_code

它的值为200.而200.phrase没有意义，所以它是未定义的。

来源

2013-02-11 01:20:15 turiyag

添加到jQuery中的HTML标记在网页上显示未定义的代码

回答

相关问题