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

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

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

您接近：

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

您有一个对象/贴图数组，因此外循环遍历这些对象/贴图。内部循环遍历每个对象元素上的属性。

您还可以使用getJSON函数：

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

这确实只是ifesdjeen回答的改写，但我认为这可能对人们有所帮助。

如果您使用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);
});

希望能帮助到你

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

您可以通过手动使用parseJSON命令或将dataType：'json'属性添加到您的ajax调用中，将其转换为JSON对象。例如

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

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

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

这是我想出的轻松查看所有数据值的方法：

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

尝试使用jQuery.map函数，与地图很好地兼容。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果您不想要警报，那就是您想要html，然后执行此操作

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

注意：使用“ append”而不是“ html”，否则最后的结果是您将在html视图中看到的结果

那么您的html代码应如下所示

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

您也可以在jQuery中将div样式化（添加类）到div，然后将其呈现为html。

如果您使用的是如下所示的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]);
      })
})

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

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

检出Array.prototype.find（）此处

$each将会起作用。另一个选项是数组结果的jQuery Ajax回调

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.');
  }
}

我使用.map for 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>`)
  })
},