循环遍历 JSON 数组会给出“未定义”的结果 [重复]

Posted 2023-05-09

【中文标题】循环遍历 JSON 数组会给出“未定义”的结果 [重复]

【英文标题】：Looping through a JSON Array gives "undefined" results [duplicate]

【发布时间】：2016-01-31 11:36:26

【问题描述】：

我从 AJAX 解析了一个 JSON 字符串（在 response var 中）：

JSON

   "TheArray":[  
        
         "AlmostThere":   
            "whatWeAreLookingFor":"Hello"
         
      ,
      
        "AlmostThere": 
            "whatWeAreLookingFor":"Goodbye"
        
      
   ]

正在解析的 JSON

var jsonData = JSON.parse(response); //response is the string version of the JSON code!

现在，我需要循环进入 JSON 数组，这里称为TheArray。我这样做：

循环数组

for (var contents in jsonData["TheArray"]) 

在里面，我们得到whatWeAreLookingFor元素的值：

for (var contents in jsonData["TheArray"]) 
    console.log(contents.whatWeAreLookingFor + "!");

但是有一个问题！控制台输出... undefined!。 - 我尝试了多种方法来完成这项工作，例如使用contents["whatWeAreLookingFor"] 等等，但我仍然得到相同的结果。

【问题讨论】：

Don't use for... in for looping over Arrays - 如果可以使用 ES6，请使用常规的 for 循环、forEach 或 for... of。

提示：在你的循环中记录contents。这不会是你所期望的。

for (var contents in jsonData.TheArray) console.log(jsonData.TheArray[contents].AlmostThere.whatWeAreLookingFor + "!");

【参考方案1】：

您忘记访问AlmostThere

  jsonData.TheArray[i].AlmostThere.whatWeAreLookingFor

---

for (var i = 0; i < jsonData.TheArray.length; i++) 
    console.log(jsonData.TheArray[i].AlmostThere.whatWeAreLookingFor);

【参考方案2】：

如果你以你的方式循环你的数组TheArray，contents var 将变成这两个对象：

  
     "AlmostThere":   
        "whatWeAreLookingFor":"Hello"
     

和

    "AlmostThere": 
        "whatWeAreLookingFor":"Goodbye"
    

现在您想使用

访问该值

contents.whatWeAreLookingFor

但是这些对象的这个属性是未定义的。所以你的控制台记录undefined。您必须通过以下方式访问该值：

contents.AlmostThere.whatWeAreLookingFor

所以你得到对象AlmostThere并选择属性whatWeAreLookingFor。

如果您使用 jquery，您应该使用：

$.each(jsonData.TheArray, function() 
     console.log(contents.AlmostThere.whatWeAreLookingFor + '!');
);

API：http://api.jquery.com/jquery.each/

【参考方案3】：

for... in 迭代对象的键。对于数组，这意味着 (approximately) 索引 0、1、2 等。

您可以改用 Array.prototype.forEach：

jsonData.theArray.forEach(function(contents) 
  console.log(contents.AlmostThere.whatWerAreLookingFor);
)