从文件到对象的JQuery JSON

问题描述：

我从jquery站点复制了这个。我正在尝试学习如何将json数据转换为网页。日期已经验证过：http://jsonlint.com/从文件到对象的JQuery JSON

从运行我的脚本的结果是： [目标对象] [目标对象] [目标对象] [目标对象] [目标对象]

待办事项我需要解析这些数据，或者让JSON做到这一点。
这是我使用的代码：

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

答

八九不离十，试试这个：（只要文件 “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-09 14:37:32

是“数据”。json“一个真正的文件？ – nathanjosiah 2012-04-09 14:37:59

相同的结果data.json是一个真正的文件在同一台服务器上，避免了跨域的东西在firebug中，我看到get response中有正确的数据，只是搅动了[object对象]响应每个JSON条目 – rd42 2012-04-09 14:41:17

答

我有同样的问题。我通过将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的元素应该是唯一的（至少根据这个http://css-tricks.com/the-difference-between-id-and-class/）

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

对于OP，如果这是最好的答案，您能否将其标记为这样？谢谢。 – 2012-12-07 03:16:17

从文件到对象的JQuery JSON

相关推荐