Question

我正在使用for ... in循环将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"}

            ]}

有趣的是，在data[key].todo方法中使用.append()时，我能够检索JSON对象的值并将它们成功添加到无序列表中。昨天。今天这段代码不起作用。所以我昨天做错了或其他原因导致此代码无法正常执行。

Answer 1

您尝试循环的数据位于list数组中，因此您需要修改代码以使用带有递增索引变量的for循环，并循环遍历{ {1}}，而不只是data.list。试试这个：

data

Example fiddle

Answer 2

for ... in循环不用于迭代数组。它们仅用于迭代对象的属性。

Answer 3

jQuery＆＃39; s $.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)});

或者像Rory一样循环（但缓存数据长度）：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)});

For ... in循环不返回JSON对象列表

3 个答案: