gpt4 book ai didi

javascript - 读取 JSON 数据并循环遍历它

转载 作者:行者123 更新时间:2023-11-29 19:10:54 24 4
gpt4 key购买 nike

我有3个文件

  1. index.html
  2. 数据.json
  3. 应用程序.js

在我的 WAMP 服务器上。我希望遍历 JSON 数据并更新 HTML 文件的内容。

这些是我的文件的内容:

数据.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"
}]
}

应用程序.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();

当我运行这段代码时,创建了一行,所有值都设置为未定义。我认为我的循环逻辑有问题。请帮助我。

最佳答案

您会遇到这种情况,因为返回的对象是单个 key: value 对。

您需要访问 user 属性,它是一个数组。

您的代码

var items=JSON.parse(request.responseText);

解析 json 字符串后得到的值是带有 key 的 javascript 对象:'user' 和 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++) {

关于javascript - 读取 JSON 数据并循环遍历它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38924011/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com