jQuery循环来自AJAX Success的JSON结果?

时间:2009-04-09 08:16:00

标签: jquery ajax json

关于jQuery AJAX成功回调,我想循环遍历对象的结果。这是响应在Firebug中的外观示例。

[
 {"TEST1":45,"TEST2":23,"TEST3":"DATA1"},
 {"TEST1":46,"TEST2":24,"TEST3":"DATA2"},
 {"TEST1":47,"TEST2":25,"TEST3":"DATA3"}
]

如何循环结果以便我可以访问每个元素? 我尝试了类似下面的东西,但这似乎没有用。

jQuery.each(data, function(index, itemData) {
  // itemData.TEST1
  // itemData.TEST2
  // itemData.TEST3
});

12 个答案:

答案 0 :(得分:237)

您可以删除外部循环并将this替换为data.data

$.each(data.data, function(k, v) {
    /// do stuff
});

你很亲密:

$.each(data, function() {
  $.each(this, function(k, v) {
    /// do stuff
  });
});

你有一个对象/地图数组,所以外部循环遍历那些。内部循环遍历每个对象元素的属性。

答案 1 :(得分:77)

您还可以使用getJSON功能:

    $.getJSON('/your/script.php', function(data) {
        $.each(data, function(index) {
            alert(data[index].TEST1);
            alert(data[index].TEST2);
        });
    });

这实际上只是ifesdjeen答案的重写,但我认为它可能对人们有所帮助。

答案 2 :(得分:38)

如果你使用Fire Fox,只需打开一个控制台(使用F12键)并试试这个:

var a = [
 {"TEST1":45,"TEST2":23,"TEST3":"DATA1"},
 {"TEST1":46,"TEST2":24,"TEST3":"DATA2"},
 {"TEST1":47,"TEST2":25,"TEST3":"DATA3"}
];

$.each (a, function (bb) {
    console.log (bb);
    console.log (a[bb]);
    console.log (a[bb].TEST1);
});

希望有所帮助

答案 3 :(得分:14)

对于其他坚持这一点的人来说,它可能无法正常工作,因为ajax调用将您返回的数据解释为文本 - 即它还不是JSON对象。

您可以通过手动使用parseJSON命令或只是将dataType:'json'属性添加到您的ajax调用来将其转换为JSON对象。 e.g。

jQuery.ajax({
    type: 'POST',
    url: '<?php echo admin_url('admin-ajax.php'); ?>',
    data: data, 
    dataType: 'json', // ** ensure you add this line **
    success: function(data) {
        jQuery.each(data, function(index, item) {
            //now you can access properties using dot notation
        });
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("some error");
    }
});

答案 4 :(得分:14)

像访问任何其他数组一样访问json数组。

for(var i =0;i < itemData.length-1;i++)
{
  var item = itemData[i];
  alert(item.Test1 + item.Test2 + item.Test3);
}

答案 5 :(得分:4)

这就是我想出的所有数据值:

var dataItems = "";
$.each(data, function (index, itemData) {
    dataItems += index + ": " + itemData + "\n";
});
console.log(dataItems);

答案 6 :(得分:4)

尝试 jQuery.map 功能,可以很好地使用地图。

&#13;
&#13;
var mapArray = {
  "lastName": "Last Name cannot be null!",
  "email": "Email cannot be null!",
  "firstName": "First Name cannot be null!"
};

$.map(mapArray, function(val, key) {
  alert("Value is :" + val);
  alert("key is :" + key);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
&#13;
&#13;

答案 7 :(得分:2)

如果你不想要警报,那就是你想要的html,那么就这样做

...
    $.each(data, function(index) {
        $("#pr_result").append(data[index].dbcolumn);
    });
...

注意:使用“append”而不是“html”,否则最后的结果就是你将在html视图中看到的内容

那么你的html代码应该是这样的

...
<div id="pr_result"></div>
...

您还可以在jquery呈现为html

之前设置(添加类)jquery中的div

答案 8 :(得分:0)

$each可行..另一个选项是jQuery Ajax Callback for array result

function displayResultForLog(result) 
{
       if (result.hasOwnProperty("d")) {
           result = result.d
       }

    if (result !== undefined && result != null )
    {
        if (result.hasOwnProperty('length')) 
        {
            if (result.length >= 1) 
            {
                for (i = 0; i < result.length; i++) {

                    var sentDate = result[i];

                }
            }
            else 
            {
                $(requiredTable).append('Length is 0');
            }
        }

        else 
        {
            $(requiredTable).append('Length is not available.');
        }

    }
    else 
    {
        $(requiredTable).append('Result is null.');
    }
  }

答案 9 :(得分:0)

我将.map用于foreach。例如

success:function(data){
      let dataItems = JSON.parse(data)
      dataItems = dataItems.map((item) => {
        return $(`<article>
                      <h2>${item.post_title}</h2>
                      <p>${item.post_excerpt}</p>
              </article>`)
      })
    },

答案 10 :(得分:0)

我偏爱ES2015箭头函数,用于在数组中查找值

const result = data.find(x=> x.TEST1 === '46');

检出Array.prototype.find()HERE

答案 11 :(得分:0)

如果您使用的是如下所示的JQuery ajax调用函数的short方法,则需要将返回的数据解释为json对象,以便您能够进行遍历。

$.get('url', function(data, statusText, xheader){
 // your code within the success callback
  var data = $.parseJSON(data);
  $.each(data, function(i){
         console.log(data[i]);
      })
})