使用 javascript/jQuery 循环遍历 JSON 结构答案

【问题标题】：Loop through JSON structure using javascript/jQuery使用 javascript/jQuery 循环遍历 JSON 结构
【发布时间】：2017-05-11 22:45:30
【问题描述】：

我想用给定的 JavaScript 遍历下面的 JSON

{  
    "jsonUrl": "/testUrl",  
    "data": {  
        "country":"US",  
        "company":"ABC",  
        "items":[  
         {  
             "id": "1",  
             "id2": "12345",  
             "total": 1  
         },
         {    
             "id": "2",  
             "id2": "23456",  
             "total": 2  
         }  
      ]  
   }  
}

我尝试了以下方法，但没有运气。

for (var key in json) {
    if (json.hasOwnProperty(key)) {
         alert(json[key]);
    }
}

执行此操作时，警报会显示[object][object]。我没有得到对象内部的实际数据。

【问题讨论】：

{} 是对象，您可以使用点或键访问它们的属性。例如，您可以使用json.data.country 或json['data']['country']。 [] 是数组，您可以毫无问题地使用您的方法。
因为 alert 会对数据执行 toString()... 你不应该使用 alert() 进行调试，使用 console.log() 进行调试
你也可以使用debugger关键字在开发工具中观察变量的内容
Traverse all the Nodes of a JSON Object Tree with JavaScript的可能重复

标签： javascript jquery json for-loop

【解决方案1】：

首先，在这种情况下，不要使用 alert 来查看对象的内容。当您使用 alert 并在其中传递对象时，解释器在此对象上使用 toString 方法。它的结果是[object Object] 构造。你可以在那里使用JSON.stringify。

你究竟是如何解析 json 的？您可以使用JSON.parse 来执行此操作。

另外，不检查对象是否具有hasOwnProperty 方法的属性，您可以使用Array.prototype.forEach：

yourArrayData.forEach(function () {
  console.log(JSON.stringify(value));
});

你也可以使用for-of（仅限ES6+）：

for (let value of yourArrayData) {
  console.log(JSON.stringify(value));
}

【讨论】：

【解决方案2】：

更好的选择是使用Object.keys() 函数获取密钥，然后迭代获取您的信息。

【讨论】：

并使用typeof 运算符检查类型。

【解决方案3】：

您尝试循环的 JSON 对象有几个层次，因此您不能简单地遍历键并获取它们的值（在这种情况下也是带有键的对象）。根据您要检索的信息，您将不得不采取不同的行动。如果你事先知道结构，你可以使用 for 循环遍历 Object.data.items，或者如果你只是想到达 JSON 对象的末尾，你可以设置一个队列：

let queue = [jsonObject];
while (queue.length > 0) {
    var objectToEvaluate = queue.shift();
    for (var key in objectToEvaluate) {
        if (objectToEvaluate.hasOwnProperty(key)) {
            if (typeof objectToEvaluate[key] === 'object') {
                queue.push(objectToEvaluate[key]);
            }
            else {
                // do something with the objectToEvaluate[key]
            }
        }
    }
}

使用队列需要注意一些事项。如果循环引用（{a：b，b：a}）是可能的，那么您将需要跟踪已经检查了哪些“节点”。在检查 typeof 是否为对象时也会出现一些误报。我建议阅读更多关于队列enter link description here

【讨论】：