How do I iterate over a JSON structure? [duplicate]

I have the following JSON structure:

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

How do I iterate over it using JavaScript?

7

13 Answers

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

note: the for-in method is cool for simple objects. Not very smart to use with DOM object.

8

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

6

Use for...of:

var mycars = [{name:'Susita'}, {name:'BMW'}];
for (var car of mycars)
{ document.write(car.name + "<br />");
}

Result:

Susita
BMW

13

Please let me know if it is not easy:

var jsonObject = { name: 'Amit Kumar', Age: '27'
};
for (var prop in jsonObject) { alert("Key:" + prop); alert("Value:" + jsonObject[prop]);
}

2

If this is your dataArray:

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

then:

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

1

Copied and pasted from , there is no need for the JQuery overhead.

var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) { text += person[x];
}

RESULT: John Doe 25

0

mootools example:

var ret = JSON.decode(jsonstr);
ret.each(function(item){ alert(item.id+'_'+item.classd);
});

You can use a mini library like objx -

You can write code like this:

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()

There are more 'plugins' available to let you handle data like this, see

With nested objects, it can be retrieve as by recursive function:

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

where as events is json object.

1

Marquis Wang's may well be the best answer when using jQuery.

Here is something quite similar in pure JavaScript, using JavaScript's forEach method. forEach takes a function as an argument. That function will then be called for each item in the array, with said item as the argument.

Short and easy:

var results = [ {"id":"10", "class": "child-of-9"}, {"id":"11", "classd": "child-of-10"} ];
results.forEach(function(item) { console.log(item);
});

1

this is a pure commented JavaScript example.

 <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

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=""></script>

1

Another solution to navigate through the JSON document is JSONiq (implemented in the Zorba engine), where you can write something like this:

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" :)

You can run it on