Question

我有一个JSON对象

{
    "Data": [
        {
            "Iden": "12",
            "Date": "01/23/2011",
            "City": "Clearwater",
            "State": "FL"
        },
        {
            "Iden": "12",
            "Date": "02/09/2012",
            "City": "Elgin",
            "State": "IL"
        },
        {
            "Iden": "00010-LV01-12",
            "Date": "06/22/2010",
            "City": "Newport Beach",
            "State": "CA"
        }
    ]
}

如您所见，它有3行4列。如何在jquery中使用.each迭代这个对象？

我试过了：

$.each(Data, function () {

但它只进行了第一次迭代

Answer 1

您需要使用嵌套循环。像这样：

jQuery.each( Data, function( ) {
    // `this` now points to the row of data
    jQuery.each( this, function( key, value ) {
        // process here
    } );
} );

编辑：更改内部回调以使用key, value作为参数 - 更适用于此方案。

Answer 2

jQuery.each()可以迭代数组，地图/对象，但函数参数在每种情况下的含义略有不同：

$.each(Data.Data, function(i) {
    // 'this' is the array element, i is the index
    $.each(this, function(key, value) {
        // 'this' is the value of the object item
        // key is the map/object key, value is value
    });
});

值得注意的是，this始终采用对象格式，即使它是字符串或数字。

演示：http://jsfiddle.net/jtbowden/acySP/

Answer 3

如果这是在ajax请求中，例如

  $.getJSON( url, function ( data){
     /* main JSON object is data,   array Data is inside main object, need to iterate over it*/
      $.each( data.Data, function(key, item){
       $('body').append( '<p>'+item.City +', '+item.State+'</p>');
     })
 })

Answer 4

您还可以尝试使用$.map获取数据

请参阅演示：http://jsfiddle.net/PQcFx/5/

2维JSON解析

4 个答案: