0

我从 jquery 网站复制了这个。我正在尝试学习如何将 json 数据获取到网页。日期已验证：http: //jsonlint.com/

运行我的脚本的结果是：[object Object] [object Object] [object Object] [object Object] [object Object]

我需要解析数据还是 getJSON 这样做。
这是我正在使用的代码：

<!doctype html> 
<html>
<head>

    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>

    <script type="text/javascript">
$.getJSON('data.json', function(data) {
  var items = [];

  $.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});
    </script>
</head>
<body>

</body>
</html>

故障排除提示会很棒，当然答案也会很棒！

数据.json

[
    {
        "bytes": "476.577044"
    },
    {
        "bytes": "136113.5289"
    },
    {
        "bytes": "118870.8151"
    },
    {
        "bytes": "55001.67852"
    }
]

console.log(data) 响应：

[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}]
JSON.html (line 14)
[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}]
JSON.html (line 14)
[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}]
JSON.html (line 14)
[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}]
4

2 回答 2

2

我有同样的问题。我通过将 JSONP 对象放入console.log()然后在 Chrome 的开发人员工具中查看树来解决它。在那里我意识到“对象”只是解析器给 JSON 文件中所有不同对象的名称，因此在获取值时必须考虑到这一点。

$(document).ready(function(){
    $.getJSON('data.json', function(data) {
      var items = [];

      $.each(data, function(key, val) {
        items.push('<li >' + data.object.bytes + '</li>');
      });

      $('<ul/>').addClass('my-new-list').html(items.join('')).appendTo('body');
    });
});

您想要的数据位于一个名为“对象”的对象内的键：值对中，该对象位于数组内（这是您执行时正在循环的内容$.each()）

所以你必须告诉 JQuery 查看对象内部，然后告诉它要查找什么键。

我没有放任何 ID，因为我不确定你想要它们是什么。您是否只是希望每个元素都有“字节”作为 ID？ID 应该是唯一的（至少根据这个http://css-tricks.com/the-difference-between-id-and-class/）

如果你想要的是一个class这样你就可以在整个批次上做 CSS/JQuery 那么你可以尝试类似的东西'<li class ="' + object.key + '">'

于 2012-12-06T09:47:25.287 回答
1

非常接近，试试这个：（只要文件“data.json”是有效文件）

$(document).ready(function(){
    $.getJSON('data.json', function(data) {
      var items = [];

      $.each(data, function(key, val) {
        items.push('<li id="' + key + '">' + val + '</li>');
      });

      $('<ul/>').addClass('my-new-list').html(items.join('')).appendTo('body');
    });
});

编辑

您的 json 设置方式$.each将迭代包含对象的外部数组。这使得key数字索引和val实际对象。话虽如此，将$.each部分更改为如下所示：

$.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val.bytes + '</li>');
});

应该做的伎俩

（旁注：id 不应该以数字开头）

于 2012-04-09T14:36:11.480 回答