How to iterate over json array in javascript
Solution 1
Use for-in...something like:
for (var i in dictionary) {
dictionary[i].forEach(function(elem, index) {
console.log(elem, index);
});
}
where the i
would iterate through your dictionary
object, and then you can use forEach
for every json array in the dictionary(using dictionary[i]
)
With this code you'll 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 tailor the forEach function definition(replacing the console.log
bit) to do whatever you want with it.
Edit: Doing the same thing using Object.keys
Object.keys(dictionary).forEach(function(key) {
dictionary[key].forEach(function(elem, index) {
console.log(elem, index);
});
});
Edit2: Given the somewhat complicated structure of your jsonData
object, you could try using a (sort of) all-purpose function that would act on each type of component separately. I've 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);
Solution 2
Please note that yours is just a JavaScript array object. To make it simple 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 fiddle: 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)
Prashant Shilimkar
Updated on July 23, 2022Comments
-
Prashant Shilimkar almost 2 years
Yes there are many post regarding this.But my doubt is little different.I have following array for example
var dictionary = { "12Jan2013": [{ "id": "0", "name": "ABC" }, { "id": "1", "name": "DEF" }], "13Jan2013": [{ "id": "0", "name": "PQR" }, { "id": "1", "name": "xyz" }] };
Same post is there on same site BUT here in dictionary
json
array key is dynamic.Here it is date ie 12Jan2013.It can be any date.It is not static.I have searched for that but didn't get solution.How to iterate over such a json array?
AND How to print json array as in same formate shown above?
EDIT
Here is my real code.And i shown a comment in following code where i wanted to
iterate
data iejsonData
var ingetWeatherDataForCities
callbackvar 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 }); });
-
Benjamin Gruenbaum over 10 yearsIf you're using
forEach
you might as well useObject.keys
and have pretty code all the way :) -
Sumanth Ravipati over 10 yearsAlso note that you will also want to use
hasOwnProperty(i)
to filter out properties that may have been inherited. -
Benjamin Gruenbaum over 10 years@RyanRansford Just wondering, how would that be relevant in this case?
-
tewathia over 10 years@BenjaminGruenbaum I'm not as comfortable with
Object.keys
as I'd like to be...I've added an edit to my answer. Is that what you meant? -
tewathia over 10 years@PrashantShilimkar Let me make a fiddle
-
Prashant Shilimkar over 10 years@tewathia It will be gr8 for me to understand.And let me update question what i actually did to create that(not same value) array.
-
tewathia over 10 years@PrashantShilimkar I've added the fiddle link to my answer. Have a look
-
Prashant Shilimkar over 10 yearsThank you.I have edited my question where i have created a dynamic json array.Is it the right way or what i have did is correct?
-
Abhitalks over 10 years@PrashantShilimkar: It all depends on how
data
is structured in your ajax call. Nevertheless, the concept remains the same. -
Prashant Shilimkar over 10 years@tewathia your answer is perfect.but i have made some mistack in my code posted in edited answer thats why it is not showing out put.Will you please tell whats going wrong.
-
tewathia over 10 years@PrashantShilimkar At a glance, your code looks okay to me(I'm assuming
timeConverter
is defined elsewhere). Let me add though, you can't use my answer directly with yourjsonData
object, because its structure is slightly different. See this fiddle -
Sumanth Ravipati over 10 years@BenjaminGruenbaum Doesn't the instantiated object inherit some properties from Object, or is
{}
treated slightly differently thannew Object()
?