通过 AJAX Success 的 JSON 结果进行 jQuery 循环？

在 jQueryAJAX 成功回调中，我想循环遍历对象的结果。这是响应在 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
});
494133 次浏览
小开
最佳答案

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

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

你们很亲密:

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

您有一个对象/映射数组，因此外部循环将迭代这些对象/映射。内部循环迭代每个对象元素的属性。

小开

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

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

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

希望能有所帮助

小开

你也可以使用 获取 JSON函数:

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

这实际上只是对 ifesdjeen 的回答的重新措辞，但我认为它可能对人们有帮助。

小开

$each将工作. . 另一个选项是 返回数组结果

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

尝试 JQuery 地图功能，与地图工程相当不错。

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>

小开

对于其他人来说，它可能无法工作，因为 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");
}
});
小开

这就是我想出来的可以轻松查看所有数据值的方法:

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

小开

如果你不想要警报，那就是你想要 html，然后这样做

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

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

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

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

您还可以在 jquery 呈现为 html 之前对 div 设置样式(添加类)

小开

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

如果您使用如下所示的 JQuery ajax 调用函数的简短方法，则需要将返回的数据解释为 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');

Checkout Array.Prototype.find () 给你


提交答案