如何迭代JSON结构?

608
我有以下的JSON结构:
[{ "id":"10", "class": "child-of-9" }, { "id": "11", "classd": "child-of-10" }]

我该如何使用JavaScript迭代它?


1
https://dev59.com/jkjSa4cB1Zd3GeqPDC7E - Max
7
"jquery or javascript"? jquery 是用 javascript 编写的! - AlikElzin-kilaka
9
应该是“jQuery或纯JavaScript”。 - Rasshu
4
“如何迭代JSON结构?”你不需要这样做。你需要解析它,然后你就没有JSON了,而是循环遍历生成的数组 - T.J. Crowder
投票以重新开放此问题,因为在JavaScript中,虽然数组和对象相似,但它们之间存在差异,安全地循环遍历对象的属性比数组要困难得多。与关闭相关联的答案仅涵盖数组,可能需要指向不同的问题进行关闭,但目前链接到的答案对于此问题是不正确的。 - Barkermn01
显示剩余2条评论
13个回答

9

这是一个纯注释的JavaScript示例。

  <script language="JavaScript" type="text/javascript">
  function iterate_json(){
            // Create our XMLHttpRequest object
            var hr = new XMLHttpRequest();
            // Create some variables we need to send to our PHP file
            hr.open("GET", "json-note.php", true);//this is your php file containing json

            hr.setRequestHeader("Content-type", "application/json", true);
            // Access the onreadystatechange event for the XMLHttpRequest object
            hr.onreadystatechange = function() {
                if(hr.readyState == 4 && hr.status == 200) {
                    var data = JSON.parse(hr.responseText);
                    var results = document.getElementById("myDiv");//myDiv is the div id
                    for (var obj in data){
                    results.innerHTML += data[obj].id+ "is"+data[obj].class + "<br/>";
                    }
                }
            }

            hr.send(null); 
        }
</script>
<script language="JavaScript" type="text/javascript">iterate_json();</script>// call function here

5

var jsonString = `{
    "schema": {
        "title": "User Feedback",
        "description": "so",
        "type": "object",
        "properties": {
            "name": {
                "type": "string"
            }
        }
    },
    "options": {
        "form": {
            "attributes": {},
            "buttons": {
                "submit": {
                    "title": "It",
                    "click": "function(){alert('hello');}"
                }
            }
        }
    }
}`;

var jsonData = JSON.parse(jsonString);

function Iterate(data)
{
    jQuery.each(data, function (index, value) {
        if (typeof value == 'object') {
            alert("Object " + index);
            Iterate(value);
        }
        else {
            alert(index + "   :   " + value);
        }
    });
}

Iterate(jsonData);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


3
你应该解释你的代码。没有解释的答案并没有太大帮助。 - Reeno

3
另一种浏览JSON文档的解决方案是JSONiq(在Zorba引擎中实现),您可以编写类似以下内容的代码:
let $doc := [
  {"id":"10", "class": "child-of-9"},
  {"id":"11", "class": "child-of-10"}
]
for $entry in members($doc) (: binds $entry to each object in turn :)
return $entry.class         (: gets the value associated with "class" :)

您可以在http://public.rumbledb.org:9090/public.html上运行它。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接