Iterating Javascript Array

Question

I find on google but not getting any direction, so posting here.I am using json array in javascript with ajax.From controller I am getting json array like this:

var response= {"6":{"id":"6"},"4":{"id":"4"}};

after iterating in javascript like:

for (var i in response) {
 alert(response[i].id);
 }

the order of data gets changed i.e 4,6. inside javascript why it changing the order of data.Any suggestion.

• Jacob A.: works perfectly fine for me?: jsfiddle.net/8xCQ3
• vdavid: Works fine with Chrome 34, Firefox 28, IE 11, but maybe it's just luck. If you want to guarantee the order, use a loop like: for (var i=0;i<response.length;++i)
• Jonathan Lonowski: Side note: That's a JavaScript Array of JavaScript Objects. JSON is just a data format and doesn't execute.

Answer 1

You shouldn't iterate arrays like that.

Why ?

In javascript everything is an object. Even an array.

for (var i in response)

is specific for an object. So it will work on an array too but will get the results as properties.

Properties are sorted or arbitrary, hence your strange output order.

Also, if someone modified the protorype of the Array object and added a new property, than you would get errors and your code will most certainly break.

You can fix the last problem with hasOwnProperty(i)

How ?

You should do:

for (var i = 0, iLength = response.length; i < iLength ; i++) {
 alert(response[i].id);
}

Use a classic for loop but cache the length. This way it is among the fastest for loop. It is 2x faster in IE8.

Updated answer

In the updated question you want to iterate over a map.

In javascript a map in a regular object so to iterate it you have to iterate over its properties.

for (var i in response)
 if(response.hasOwnProperty(i))
 alert(response[i].id);

The response.hasOwnProperty(i) line is not necessary here but it is a good practice to add it.

Iterating over an objects properties does not keep the order.

To order the elements you have to make an array like in your first question and sort that array.

Update 2:

When the browser interprets your response variable it will make it look like this:

{
 4:{
 "id":"4"
 }
 6:{
 "id":"6"
 }
};

This is an output from chrome:

chrome object structure output

Some browsers store the objects, ordered by property name, ascending. Because of this, it is logical that when you iterate them, they will not be ordered.

There is nothing you can do about it, at the moment.

• user3406754: thanks for your answer i have updated my response in question. alert(response[i].id); not working in this case.
• Andrei: The updated response changes the entire question. I will post answer for that in a moment.
• user3406754: sorry still problem persist of ordering
• Andrei: I said that in my answer. Objects do not retain order. Only arrays do. This is the way javascript works.

Answer 2

The for (x in y) operator iterates over the enumerable properties of an object in arbitrary order.

Use a regular loop instead:

for (var i=0; i<response.length; i++) {
 alert(response[i].id);
}

After your edit, response is no longer an array but an object. The properties of an object have no inherent order. JavaScript does not remember in which order they were declared.

You can copy the names of the properties to an array, and sort that:

var response = {"6":{"id":"6"},"4":{"id":"4",}};
var sorted = new Array();
for (var obj in response) {
 sorted.push(obj);
}
sorted.sort(function(a,b) { return a - b; });
for (var i=0; i<sorted.length; i++) {
 alert(response[sorted[i]].id);
}

• user3406754: thanks for your answer i have updated my response in question. alert(response[i].id); not working in this case.
• user3406754: i can iterate it only the problem is of order gets changed.problem of order still persist
• Andomar: Correct. JavaScript does not remember the order in which properties are added to an object. The information is just not there.

Answer 3

Use a standard for loop (where you control the order of the properties) instead of a for in loop (which gets the properties in no particular order).

for (var i = 0; i < response.length; i++) {
 alert(response[i].id);
}

Answer 4

Here http://jsfiddle.net/an9Gf/ works. But for in should not be used with array, just for objects. Anyway try with a plain old for cycle.

var i =0;
for(i=0;i<response.length;i++){
 alert(response[i].id);
}

Answer 5

You shouldn't use for..in to iterate over arrays. Use iteration methods.

response.forEach(function (elem) {
 console.log(elem.id);
});

Answer 6

Not sure what order for (var x in z)takes. Plus, IE will return not only the items in the array, but also some Array functions/properties :(

In my experience, for (var x in z) should be avoided most of the time in javascript (at least for Arrays).

Try using this instead:

for (var i = 0; i < response.length; i++) {
 alert(response[i].id);
 }