在$ .ajax成功中迭代JSON

时间:2022-11-27 20:18:44

When a user clicks a button I want to return some data and iterate through the JSON so that I can append the results to a table row.

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

At this point I am just trying to get my loop to work, here's my code.

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

My JSON is coming back as follows: {"COLUMNS":["username","password"],"DATA":[["foo", "bar"]]}

我的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);
        }
    });

});

I'm getting a jQuery (line 16, a is not defined) error. What am I doing wrong?

我得到一个jQuery(第16行,一个未定义)错误。我究竟做错了什么?

2 个解决方案

#1


11  

Assuming your JSON is like this

假设你的JSON是这样的

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

You can query it like this

你可以像这样查询它

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

Sample : http://jsfiddle.net/4HxSr/9/

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

EDIT : As per the JSON OP Posted later

编辑:根据JSON OP发布以后

Your JSON does not have an items, so it is invalid.

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

As per your JSON like this

按照你的JSON这样

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

You should query it like this

你应该这样查询它

console.debug(item.COLUMNS[0])
console.debug(item.COLUMNS[1])

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

Working sample : http://jsfiddle.net/4HxSr/19/

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

#2


3  

You need to add:

你需要添加:

dataType: 'json',

.. so you should have:

..所以你应该:

$("#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);
    }
});

});

.. as well as ensuring that you are referencing COLUMNS in the each statement.

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

getJson is also another way of doing it..

getJson也是另一种做法..

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

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

#1


11  

Assuming your JSON is like this

假设你的JSON是这样的

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

You can query it like this

你可以像这样查询它

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

Sample : http://jsfiddle.net/4HxSr/9/

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

EDIT : As per the JSON OP Posted later

编辑:根据JSON OP发布以后

Your JSON does not have an items, so it is invalid.

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

As per your JSON like this

按照你的JSON这样

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

You should query it like this

你应该这样查询它

console.debug(item.COLUMNS[0])
console.debug(item.COLUMNS[1])

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

Working sample : http://jsfiddle.net/4HxSr/19/

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

#2


3  

You need to add:

你需要添加:

dataType: 'json',

.. so you should have:

..所以你应该:

$("#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);
    }
});

});

.. as well as ensuring that you are referencing COLUMNS in the each statement.

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

getJson is also another way of doing it..

getJson也是另一种做法..

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

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