如何遍历JSON结构?\[重复\]

JavaScript

番长斯丁

2020-03-12

我具有以下JSON结构:

[{ "id":"10", "class": "child-of-9" }, { "id": "11", "classd": "child-of-10" }]

如何使用JavaScript进行迭代?

第1202篇《如何遍历JSON结构?\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
神奇老丝 2020.03.12

导航JSON文档的另一种解决方案是JSONiq(在Zorba引擎中实现),您可以在其中编写类似以下内容的内容:

jsoniq version "1.0";

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://try.zorba.io/上运行它

番长神乐小小 2020.03.12

使用jQuery时,侯爵王很可能是最好的答案。

使用JavaScript的forEach方法,这在纯JavaScript中非常相似forEach接受一个函数作为参数。然后将针对数组中的每个项目调用该函数,并以所述项目作为参数。

简短易行:

<script>
var results = [ {"id":"10", "class": "child-of-9"}, {"id":"11", "classd": "child-of-10"}];

results.forEach( function( item ) {
    console.log( item );
    });
</script>
Sam番长逆天 2020.03.12

这是一个纯注释的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
樱飞云泡芙 2020.03.12

您可以使用像物objx一个迷你图书馆- http://objx.googlecode.com/

您可以编写如下代码:

var data =  [ {"id":"10", "class": "child-of-9"},
              {"id":"11", "class": "child-of-10"}];

// alert all IDs
objx(data).each(function(item) { alert(item.id) });

// get all IDs into a new array
var ids = objx(data).collect("id").obj();

// group by class
var grouped = objx(data).group(function(item){ return item.class; }).obj()

还有更多“插件”可用于处理此类数据,请参见http://code.google.com/p/objx-plugins/wiki/PluginLibrary

Tony西门古一 2020.03.12

http://www.w3schools.com复制和粘贴,不需要JQuery开销。

var person = {fname:"John", lname:"Doe", age:25};

var text = "";
var x;
for (x in person) {
    text += person[x];
}

结果:John Doe 25

老丝Pro 2020.03.12
var arr = [ {"id":"10", "class": "child-of-9"}, {"id":"11", "classd": "child-of-10"}];

for (var i = 0; i < arr.length; i++){
    var obj = arr[i];
    for (var key in obj){
        var attrName = key;
        var attrValue = obj[key];
    }
}

var arr = [ {"id":"10", "class": "child-of-9"}, {"id":"11", "class": "child-of-10"}];
    
for (var i = 0; i < arr.length; i++){
  document.write("<br><br>array index: " + i);
  var obj = arr[i];
  for (var key in obj){
    var value = obj[key];
    document.write("<br> - " + key + ": " + value);
  }
}

注意:for-in方法对于简单对象很酷。与DOM对象配合使用不是很聪明。

Harry小小 2020.03.12

如果这是您的dataArray

var dataArray = [{"id":28,"class":"Sweden"}, {"id":56,"class":"USA"}, {"id":89,"class":"England"}];

然后:

$(jQuery.parseJSON(JSON.stringify(dataArray))).each(function() {  
         var ID = this.id;
         var CLASS = this.class;
});
EvaPro 2020.03.12

取自jQuery docs

var arr = [ "one", "two", "three", "four", "five" ];
var obj = { one:1, two:2, three:3, four:4, five:5 };

jQuery.each(arr, function() {
  $("#" + this).text("My id is " + this + ".");
  return (this != "four"); // will stop running to skip "five"
});

jQuery.each(obj, function(i, val) {
  $("#" + i).append(document.createTextNode(" - " + val));
});

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android