我如何迭代JSON结构?

我有以下JSON结构:

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

我如何使用JavaScript迭代它?

1123886 次浏览

摘自jQuery文档:

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

mootools的例子:

var ret = JSON.decode(jsonstr);


ret.each(function(item){
alert(item.id+'_'+item.classd);
});

你可以使用像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

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对象一起使用不是很明智。

使用# EYZ0:

var mycars = [{name:'Susita'}, {name:'BMW'}];


for (var car of mycars)
{
document.write(car.name + "<br />");
}

结果:

Susita
BMW

另一个在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上运行它

如果这是你的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;
});

对于嵌套对象,可以通过递归函数检索:

function inside(events)
{
for (i in events) {
if (typeof events[i] === 'object')
inside(events[i]);
else
alert(events[i]);
}
}
inside(events);

其中as events是json object。

这是一个纯注释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

王侯的问题可能是使用jQuery时的最佳答案。

下面是纯JavaScript中非常类似的东西,使用JavaScript的forEach方法。forEach接受函数作为参数。然后,将为数组中的每个项调用该函数,并将该项作为参数。

简短而简单:

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


results.forEach(function(item) {
console.log(item);
});

如果不容易,请告诉我:

var jsonObject = {
name: 'Amit Kumar',
Age: '27'
};


for (var prop in jsonObject) {
alert("Key:" + prop);
alert("Value:" + jsonObject[prop]);
}

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>

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

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


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

结果:无名氏25人