閱讀JSON數據，並通過它

Question

循環我有3個文件

1. 的index.html
2. data.json
3. 我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。我認爲我的循環邏輯存在問題，請幫助我。

Answer 1

由於返回的對象是單個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++) { 

Answer 2

看看你的對象的結構：

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