How to iterate json array in javascript

Question

Yes, there are many posts about this. But my doubts are not much different. I have the following array for example

var dictionary = { "12Jan2013": [{ "id": "0", "name": "ABC" }, { "id": "1", "name": "DEF" }], "13Jan2013": [{ "id": "0", "name": "PQR" }, { "id": "1", "name": "xyz" }] }; 

The same message is on the same site , but here, in the json dictionary, the key array is dynamic . Here is the date, i.e. 12Jan2013.This can be any date. It is not static. I searched for this, but got no solution.

How to iterate over such a json array?

And how to print a json array, as in the same formation as shown above?

EDIT

Here is my real code. And I showed a comment in the following code where I wanted to iterate data, i.e. jsonData var in getWeatherDataForCities callback

 var arrAllrecords = []; var arrCityrecordForADay = []; function getWeatherDataForCities(cityArray, callback){ var toDaysTimestamp = Math.round((new Date()).getTime() / 1000) - (24*60*60); for(var i in cityArray){ for(var j=1; j<=1; j++){ var jsonurl = "http://api.openweathermap.org/data/2.5/history/city?q="+cityArray[i]+"&dt="+toDaysTimestamp; $.ajax({ url: jsonurl, dataType: "jsonp", mimeType: "textPlain", crossDomain: true, contentType: "application/json; charset=utf-8", success: function(data){ var arrCityRecordForDay = []; /*arrCityrecordForADay.push(data.list[0].city.name); arrCityrecordForADay.push(data.list[0].weather[0].description); arrCityrecordForADay.push(timeConverter(data.list[0].dt)); arrCityrecordForADay.push(data.list[0].main.temp); arrCityrecordForADay.push(data.list[0].main.humidity); arrCityrecordForADay.push(data.list[0].main.pressure) arrCityrecordForADay.push(data.list[0].wind.speed);*/ //'{"pets":[{"name":"jack"},{"name":"john"},{"name":"joe"}]}'; arrCityRecordForDay.push( {"cityName" : data.list[0].city.name}, {"weather" : data.list[0].weather[0].description} ); var tempId = data.list[0].city.name+"-"+timeConverter(data.list[0].dt); arrCityrecordForADay.push( {tempId : arrCityRecordForDay} ); if(((arrCityrecordForADay.length)) === cityArray.length) { callback(arrCityrecordForADay); } } }); toDaysTimestamp = toDaysTimestamp - (24*60*60); } } } $(document ).ready(function() { var cityArray = new Array(); cityArray[0] = "pune"; getWeatherDataForCities(cityArray, function(jsonData) { // Here I want to iterate jsonData }); }); 

Answer 1

Use for-in ... something like:

 for (var i in dictionary) { dictionary[i].forEach(function(elem, index) { console.log(elem, index); }); } 

where i will go through your dictionary object, and then you can use forEach for each json array in the dictionary (using dictionary[i] )

With this code you will get

 Object {id: "0", name: "ABC"} 0 Object {id: "1", name: "DEF"} 1 Object {id: "0", name: "PQR"} 0 Object {id: "1", name: "xyz"} 1 

You can customize the definition of the forEach function (replacing the console.log bit) to do whatever you need with it.

Demo

Edit: Doing the same with Object.keys

 Object.keys(dictionary).forEach(function(key) { dictionary[key].forEach(function(elem, index) { console.log(elem, index); }); }); 

Edit2: Given the somewhat complex structure of your jsonData object, you can try using a (sort of) generic function that will act separately for each type of component. I probably missed a few cases, but maybe something like:

 function strung(arg) { var ret = ''; if (arg instanceof Array) { arg.forEach(function(elem, index) { ret += strung(elem) + ','; }); } else if (arg instanceof Object) { Object.keys(arg).forEach(function(key) { ret += key + ': /' + strung(arg[key]) + '/'; }); } else if (typeof arg === "string" || typeof arg === "number") { ret = arg; } return ret; } document.body.innerHTML = strung(jsonData); 

Demo

Answer 2

Note that yours is just a JavaScript array object. To make this easy to understand, you can iterate over it like this:

 for (var i in dictionary) { // do something with i // here i will contain the dates for (n = 0; n < dictionary[i].length; n++) { // do something with the inner array of your objects // dictionary[i][n].id contains the "id" of nth object in the object i // dictionary[i][n].name contains the "name" of nth object in the object i } } 

See this script: http://jsfiddle.net/Ke8F5/

The iteration looks like this:

 12Jan2013 : (id = 0, name = ABC) (id = 1, name = DEF) 13Jan2013 : (id = 0, name = PQR) (id = 1, name = XYZ) 

Answer 3

You can use a for loop.

 for (var i in json) { ... } 

Then i is the current key, so you can use json [i] and get the data in the corresponding index.

And then, if you need to iterate over internal elements, you can do the same.

Answer 4

You can use for ... in , but you must combine it with hasOwnProperty , or you will iterate over the inherited properties, probably breaking your code.

  for (var key in object) { if (object.hasOwnProperty(key)) { // Do stuff. } }