For ...在循環中不返回來自JSON對象列表的值

我正在使用for ... in循環將JSON數據集中的值寫入網頁的無序列表中。For ...在循環中不返回來自JSON對象列表的值

當執行下面的代碼時，我只獲取一個列表項元素，其中包含JSON數據中的所有對象，而不是每個對象的單個列表項。 JSON數據中的對象的值也沒有寫入列表項元素。

HTML：

<html> 
    <body> 
    <ul id="test"> 
    </ul> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script type="text/javascript" src="doer_json.js"></script> 
    </body> 
</html>

JS：

$.getJSON('doer_data.json', function(data) {    
for (key in data) { 
    $('#test').append("<li>" + data[key] + "</li>"); 
} // for loop 

$('#test li').css("color", "blue"); });

JSON數據：

{ "list" : 
      [ 
       {"todo": "Complete remaining Duckett chapters."}, 
       {"todo": "Watch AngularJs video on Lynda.com."}, 
       {"todo": "Complete design specification for Doer app."}, 
       {"todo": "Complete play."}, 
       {"todo": "Finish Flatland."}, 
       {"todo": "Finish Harper's"} 

      ]}

有趣的是在.append()方法，使用data[key].todo時，我能夠檢索的值JSON對象併成功將它們添加到無序列表.Yeste rday。今天這段代碼無法運行。所以我昨天做錯了，或者其他的東西導致這個代碼不能正確執行。

來源

2015-06-18 George Spelvin

你想遍歷是list陣列中的數據，因此你需要修改你的代碼使用for循環和遞增索引變量，並遍歷data.list，不只是data。試試這個：

for (var i = 0; i < data.list.length; i++) { 
    $('#test').append("<li>" + data.list[i].todo + "</li>"); 
}

Example fiddle

來源

2015-06-18 20:18:28

的...在循環是不是遍歷數組。它們僅用於迭代對象的屬性。

來源

2015-06-18 20:18:48 bhspencer

jQuery的$.getJSON回報延期的承諾，所以你可以這樣做：

$.getJSON('doer_data.json') 
.done(function(data){ 
     data.list.forEach(function(i){ 
      $("#test").append("<li>" + i.todo + "</li>") 
     }); 
}) 
.fail(function(xhr){ console.log("fail " + xhr.responseText)});

或者爲循環像羅裏（但緩存數據長度）：P

len = myArray.length; i < len 

$.getJSON('doer_data.json') 
.done(function(data){ 
     for(var i = 0, len = data.list.length; i < len; i++){ 
      $("#test").append("<li>" + data.list[i].todo + "</li>") 
     } 
}) 
.fail(function(xhr){ console.log("fail " + xhr.responseText)});

來源

2015-06-18 20:50:33 brroshan

For ...在循環中不返回來自JSON對象列表的值

回答

相關問題