How do I iterate over a JSON structure?

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.

Use for...of:

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

Result:

Susita BMW 

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

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

Copied and pasted from http://www.w3schools.com, 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

mootools example:

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

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

You can use a mini library like objx - http://objx.googlecode.com/

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 http://code.google.com/p/objx-plugins/wiki/PluginLibrary

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.

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 

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 http://public.rumbledb.org:9090/public.html