Question

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

运行我的脚本的结果是： [对象] [对象] [对象] [对象] [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>

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

data.json

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

console.log（数据）响应：

[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"}]

Answer 1

我遇到了同样的问题。我通过将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()时循环的那个）< / p>

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

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

如果您想要的是class，那么您可以在整个批次中执行CSS / JQuery，那么您可以尝试类似'<li class ="' + object.key + '">'
的内容

Answer 2

非常接近，试试这个:(只要文件“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不应以数字开头）

从文件到对象的JQuery JSON

2 个答案: