从json文件中读取数据并将其显示在html页面上
[英]reading data from json file and displaying them on html page
问题描述
I have a json file like this : 
我有一个像这样的json文件：
[
{
"X_id": [ "id1" ],
"contents.value": [ "AA" ],
"contents.count": [ 95 ]
},
{
"X_id": [ "id2" ],
"contents.value": [ "BB" ],
"contents.count": [ 41 ]
},
{
"X_id": [ "id3" ],
"contents.value": [ "CC" ],
"contents.count": [ 36 ]
},
{
"X_id": [ "id4" ],
"contents.value": [ "DD" ],
"contents.count": [ 4 ]
},
{
"X_id": [ "id5" ],
"contents.value": [ "EE" ],
"contents.count": [ 33 ]
}
]
and I want to display this values on my html page, and for the test I try first to show them in console : 并且我想在我的html页面上显示此值，为了进行测试，我首先尝试在console中显示它们：
$.getJSON("example.json", function(data) {})
.done(function(data) {
$.each(data.items, function(i, item) {
console.log(item.contents.value);
});
})
.fail(function() {
console.log("error");
})
.always(function(data) {
console.log(data);
});
but I get this error message : 但我收到此错误消息：
TypeError: a is undefined
...rCase()},each:function(a,c,d){var e,f=0,g=a.length,h=g===b||p.isFunction(a);if(d...
How can I solve this problem ? 我怎么解决这个问题 ？
3 个解决方案
解决方案1
1 2015-11-08 23:34:10
Your data is an array of objects. 您的数据是一个对象数组。 Yet you are trying to pass data.items to $.each . 但是，您正在尝试将data.items传递给$.each 。 Arrays don't have such a property: 数组没有这样的属性：
> var data = [];
> data.items
undefined
You probably want to pass data itself to $.each . 您可能希望将data本身传递给$.each 。
See also Access / process (nested) objects, arrays or JSON . 另请参阅访问/处理（嵌套）对象，数组或JSON 。
Wrt to console.log(item.contents.value); 写到console.log(item.contents.value); (which is wrong), have a look at How to access object properties containing special characters? （这是错误的），请看一下如何访问包含特殊字符的对象属性？ . 。
解决方案2
0 2015-11-08 23:35:20
Arrays don't have an items property. 数组没有items属性。 Just use data instead: 只需使用data ：
$.getJSON("example.json", function(data) {})
.done(function(data) {
$.each(data, function(i, item) {
console.log(item.contents.value);
});
})
.fail(function() {
console.log("error");
})
.always(function(data) {
console.log(data);
});
解决方案3
0 2015-11-09 01:27:43
following code working fine check it once , why your getting error because of get json data is array object not so need to pass data[0] then you can iterate ,in key value pairs value is again array. 下面的代码可以很好地检查一次，为什么由于获取json数据而导致的错误不是数组对象，所以不需要传递data [0]然后可以迭代，在键值对中，值又是数组。
<!DOCTYPE html>
<html>
<head>
<title>Consoling Json Array</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
</head>
<body>
<div>TODO write content</div>
<script>
$.getJSON("example.json", function (data) {
console.log(data);
})
.done(function (data) {
$.each(data[0], function (i, item) {
console.log(i,item[0]);
});
})
.fail(function () {
console.log("error");
})
.always(function (data) {
console.log(data);
});
</script>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.