jQuery 循环从 AJAX 成功的 JSON 结果？

Posted 2023-05-08

【中文标题】jQuery 循环从 AJAX 成功的 JSON 结果？

【英文标题】：jQuery loop over JSON result from AJAX Success?

【发布时间】：2010-10-18 12:18:29

【问题描述】：

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

【问题讨论】：

这应该可以。你确定那是完全相同的代码和相同的数据吗？

【参考方案1】：

你可以去掉外层循环，把this换成data.data：

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

你很亲密：

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

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

【讨论】：

第一个循环用于“类别”，而其中的循环用于“属性”。那还怎么做呢？

如果你想使用对象元素而不是它的属性怎么办？为什么@aherrick 在问题中的循环不起作用？

如果在单独的函数中使用此循环，请使用$(data) 而不是data，否则变量k 始终返回0。

有人能解释一下传递给第二个函数的变量 k 和 v 吗？

我收到此错误：Uncaught TypeError: Cannot use 'in' operator to search for '188' in

【参考方案2】：

你也可以使用getJSON函数：

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

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

【讨论】：

这有帮助。出于某种原因，我无法得到@cletus 的工作答案，但确实如此。不知道 jQuery 的奥秘是什么，但简单的代码并不总是像你期望的那样工作。

【参考方案3】：

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

希望对你有帮助

【参考方案4】：

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

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

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

【讨论】：

这给了我“数据未定义”。

您应该使用自己的变量来存储您传递给 url 的数据。如果您的数据变量称为 mydata 则使用 data: mydata

啊。现在明白了。谢谢。

Uncaught TypeError: Cannot use 'in' operator to search for '188' in 收到该错误。

【参考方案5】：

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

for(var i =0;i < itemData.length-1;i++)

  var item = itemData[i];
  alert(item.Test1 + item.Test2 + item.Test3);

【讨论】：

老问题，但是如何在不知道名称的情况下遍历 json 键...例如 Test1、Test2、ext...

@BarclayVision 您只需将密钥用作数字。第一个键是[0]，下一个是[1]，以此类推。

我们可以在这个for循环中使用另一个ajax调用吗？如果是，请告诉我如何？

【参考方案6】：

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

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

【参考方案7】：

试试 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>

【参考方案8】：

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

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

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

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

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

您还可以在 jquery 中的 div 呈现为 html 之前对其进行样式（添加类）

【参考方案9】：

我将 .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】：

如果你使用如下图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]);
      )
)

【参考方案11】：

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

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

结帐 Array.prototype.find() HERE

【参考方案12】：

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