阅读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。我认为我的循环逻辑存在问题，请帮助我。

来源

2016-08-12 Rakesh V

由于返回的对象是单个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++) {

来源

2016-08-12 18:06:51

谢谢你帮助我！ –

@RakeshVenki欢迎您:) –

“你一直用这个词，我不认为这意味着你的想法。” [没有像“JSON对象”]（http://benalman.com/news/2010/03/theres-no-such-thing-as-a-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" 
    } 
    ] 
}

有一个关键，值是一个数组。

你需要一个循环是这样的：

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

来源

2016-08-12 18:09:25 OregonTrail

谢谢！这对我有用！ –

阅读JSON数据，并通过它

回答

相关问题