Javascript 读取JSON数据并在其中循环

我有3个文件

index.html

data.json

app.js

在我的WAMP服务器上。我希望遍历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();

var-request=new-XMLHttpRequest（）；
open（'GET'，'data.json'）；
request.onreadystatechange=函数（）{
if（（request.readyState==4）和&（request.status==200））{
var items=JSON.parse（request.responseText）；
控制台日志（项目）；
对于（var输入项）{
控制台日志（键）；
var output=”“+项[key]。目标+“”+项[key]。类型+“”+项[key]。日期+“”；
控制台日志（输出）；
$（“表tbody”）。追加（输出）；
输出=''；
}
}
}
request.send（）；

---

当我运行此代码时，将创建一行，其中所有值都设置为未定义。我想我的循环逻辑有问题。请帮帮我。

您遇到了这个问题，因为返回的对象是单个

键：值

对

您需要访问

user

属性，该属性是一个数组

您的代码

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

解析json字符串后得到的值是带有

键

：“user”和

值

：的javascript对象，这是一个数组

应该是

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++) {

var data=JSON.parse（request.responseText）；
var items=data.user 查看对象的结构：

{
  "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='';
              }}
          }}

for（项目中的var键）{if（items.hasOwnProperty（键））{
for（items[key]中的var i）{if（items[key].hasOwnProperty（i））{
控制台日志（项[键][i]）；
var output=“”+项[key][i]。目标+“”+项[key][i]。类型+“”+项[key][i]。日期+“”；
控制台日志（输出）；
$（“表tbody”）。追加（输出）；
输出=''；
}}
}}
谢谢您的帮助！！“你一直在用这个词。我认为它的意思和你想象的不一样。”@JasonCust谢谢你澄清了这一点。我实际上是把它称为json字符串。将更新该帖子。阿尔索