0

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

$(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>');
      });
    })
 })

这是网页上显示的屏幕截图： 在此处输入图像描述

我检查了 JSON 代码，它是有效的。如果有帮助，这里是 JSON 代码：

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

我希望有人能告诉我我在这里缺少什么......在此先感谢您的帮助。

更新： 感谢大家的快速响应。我更新了 jQuery 代码，因为问题似乎是因为返回的 JSON 数据是单个对象而不是数组。我使用的 jQuery 代码用于 JSON 数组。我已经根据 Vlad 的回答更新了 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>');
    });
});

数据在网页上仍然显示为未定义，这是一个截图： 在此处输入图像描述

在我看来，上面的代码应该可以工作。我一直在研究，但到目前为止，大多数代码建议都是针对 JSON 数组的。如果您对更新的代码不起作用的原因有任何想法，请告诉我。谢谢！

4

3 回答 3

1

您返回的 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-11T01:59:27.933 回答
0

试试这个：

$(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-11T01:18:58.040 回答
0

您当前正在逐个元素地迭代返回的 JSON 数据。第一个元素是：

data.status_code

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

于 2013-02-11T01:20:15.550 回答