阅读JSON数据,并通过它
问题描述:
循环我有3个文件阅读JSON数据,并通过它
- 的index.html
- data.json
- 我WAMP的服务器上app.js
。我希望遍历JSON数据并更新HTML文件的内容。
这些都是我的文件的内容:
data.json
{
"user": [{
"goal": "HTML essential training",
"type": "Beginner",
"date": "20/07/2016"
}, {
"goal": "CSS essential training",
"type": "Beginner",
"date": "30/07/2016"
}, {
"goal": "CSS core concepts",
"type": "Intermediate",
"date": "10/08/2016"
}, {
"goal": "Javascript essential training",
"type": "Beginner",
"date": "20/08/2016"
}, {
"goal": "Object Oriented JS",
"type": "Advanced",
"date": "30/08/2016"
}]
}
app.js
var request = new XMLHttpRequest();
request.open('GET', 'data.json');
request.onreadystatechange = function() {
if ((request.readyState === 4) && (request.status === 200)) {
var items = JSON.parse(request.responseText);
console.log(items);
for (var key in items) {
console.log(key);
var output = "<tr><td><input type='checkbox' name='record'></td><td>" + items[key].goal + "</td><td>" + items[key].type + "</td><td>" + items[key].date + "</td></tr>";
console.log(output);
$("table tbody").append(output);
output = '';
}
}
}
request.send();
当我运行这段代码,一行的所有值创建设置为undefined。我认为我的循环逻辑存在问题,请帮助我。
答
由于返回的对象是单个key: value
对,所以您正在遇到此问题。您需要访问user
属性,它是一个数组。
代码
var items=JSON.parse(request.responseText);
你解析JSON字符串后得到的值与key
JavaScript对象: '用户' 和value
:这是一个数组
应该是
var data =JSON.parse(request.responseText);
var items = data.user; <-- this is an array of objects
// iterate using a for loop, since it is not an object technically
for(var i=0; i < items.length; i++) {
答
看看你的对象的结构:
{
"user": [
{
"goal": "HTML essential training",
"type": "Beginner",
"date": "20\/07\/2016"
},
{
"goal": "CSS essential training",
"type": "Beginner",
"date": "30\/07\/2016"
},
{
"goal": "CSS core concepts",
"type": "Intermediate",
"date": "10\/08\/2016"
},
{
"goal": "Javascript essential training",
"type": "Beginner",
"date": "20\/08\/2016"
},
{
"goal": "Object Oriented JS",
"type": "Advanced",
"date": "30\/08\/2016"
}
]
}
有一个关键,值是一个数组。
你需要一个循环是这样的:
for (var key in items){if (items.hasOwnProperty(key)) {
for (var i in items[key]) {if (items[key].hasOwnProperty(i)){
console.log(items[key][i]);
var output="<tr><td><input type='checkbox' name='record'></td><td>" + items[key][i].goal + "</td><td>" + items[key][i].type + "</td><td>" + items[key][i].date + "</td></tr>";
console.log(output);
$("table tbody").append(output);
output='';
}}
}}
+0
谢谢!这对我有用! –
谢谢你帮助我! –
@RakeshVenki欢迎您:) –
“你一直用这个词,我不认为这意味着你的想法。” [没有像“JSON对象”](http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/)。 –