使用jQuery循环遍历JSON对象数组

Question

我正在尝试循环遍历一个json文件的对象数组，以访问其变量的键和值，并使用jquery的getjson和each将它们附加到列表项中。

我认为解决方案应该类似于这篇文章中的解决方案...但是我似乎无法使其工作并显示结果...任何帮助都将非常感激！

Jquery, looping over a json array

$.getJSON('data/file.json', function(data)
 { 
   var data = [];
   $(data).each(function(idx, obj)
    { 
     $(obj).each(function(key, value)
      {console.log(key + ": " + value);}
     }
   }
);

JSON数据格式如下：

[{
    "name": "Name",
    "street_address1": "XYZ Road",
    "street_address2": null,
    "city": "New York",
    "zip": 10038,
    "phone": 2122222222 ", 
    "description ": "About xyz..."
 }, 
 { next listing... }]

而HTML应该像这样格式化：

 Name: Name

 Address: XYZ Road
          Floor #2
          City, State 10001

 Description: About xyz...

- sharpiemarker1

Answer 1

var data = [];

你正在用一个空数组替换 data，当这个程序被运行时，这将销毁你的数据。移除这一行代码，它就可以正常工作。

编辑：你的代码中还存在一些语法错误。你需要在每个 each 语句后面添加一个括号闭合符号。应该像这样：

$.getJSON('data/file.json', function(data){ 
    $(data).each(function(idx, obj){ 
        $(obj).each(function(key, value){
            console.log(key + ": " + value);
        });
    });
});

编辑 2： data 和 obj 不是 jQuery 对象，它们只是普通对象。你需要使用$.each而不是$().each。

$.getJSON('data/file.json', function(data){ 
    $.each(data, function(idx, obj){ 
        $.each(obj, function(key, value){
            console.log(key + ": " + value);
        });
    });
});

- gen_Eric

---

删除了那个还是没有显示...？ - sharpiemarker1

@obj-ified：很奇怪，你的控制台没有任何输出吗？ - gen_Eric

哦，Firebug控制台中出现了“参数列表后缺少括号”的错误提示。我想是因为每个回调函数没有被正确地关闭。我进行了修改，但现在却得到了一系列未定义的对象列表。 - sharpiemarker1

@obj-ified: data和obj不是jQuery对象，请尝试使用$.each而不是$().each。请查看我的答案中的第二次编辑。 - gen_Eric

让我摆脱了困境。谢谢！ - Calvin Froedge

Answer 2

$.getJSON('data/file.json', function(data){ 
    $.each(data,function(idx, obj){ 
        $.each(obj, function(key, value){
            console.log(key + ": " + value);
        });
    });
});

- AlexC

---

obj不是jQuery对象，您也想在其上使用$.each。 - gen_Eric

使用 $(obj) 实际上会将对象包装在一个数组中，这对此处没有帮助。 - gen_Eric