在$ .ajax成功中迭代JSON

当用户单击按钮时，我想返回一些数据并遍历JSON，以便我可以将结果附加到表格行。

在这一点上，我只是想让我的循环工作，这是我的代码。

我的JSON回复如下：{“COLUMNS”：[“username”，“password”]，“DATA”：[[“foo”，“bar”]]}

$("#button").click(function(){ $.ajax({ url: 'http://localhost/test.php', type: 'get', success: function(data) { $.each(data.items, function(item) { console.log(item); }); }, error: function(e) { console.log(e.message); } }); }); 

我得到一个jQuery（第16行，一个未定义）错误。 我究竟做错了什么？

Answer 1

假设你的JSON是这样的

 var item= { "items": [ { "FirstName":"John" , "LastName":"Doe" }, { "FirstName":"Anna" , "LastName":"Smith" }, { "FirstName":"Peter" , "LastName":"Jones" } ] } 

你可以像这样查询它

 $.each(item.items, function(index,item) { alert(item.FirstName+" "+item.LastName) }); 

示例： http ： //jsfiddle.net/4HxSr/9/

编辑：根据JSON OP发布以后

您的JSON没有项目，因此无效。

按照你的JSON这样

 var item= { "COLUMNS": [ "username", "password" ], "DATA": [ [ "foo", "bar" ] ,[ "foo2", "bar2" ]] } 

你应该这样查询它

 console.debug(item.COLUMNS[0]) console.debug(item.COLUMNS[1]) $.each(item.DATA, function(index,item) { console.debug(item[0]) console.debug(item[1]) }); 

工作样本： http ： //jsfiddle.net/4HxSr/19/

Answer 2

你需要添加：

 dataType: 'json', 

..所以你应该：

 $("#button").click(function(){ $.ajax({ url: 'http://localhost/test.php', type: 'get', dataType: 'json', success: function(data) { $.each(data.COLUMNS, function(item) { console.log(item); }); }, error: function(e) { console.log(e.message); } }); }); 

..以及确保在每个语句中引用COLUMNS。

getJson也是另一种做法..

http://api.jquery.com/jQuery.getJSON/