Foreach in javascript alter the secuence of my array

Question

I've a question about the foreach in javascript

I've the following array in javascript:

puntos":{"2":"punto dos","3":"punto tres","4":"punto cuatro","5":"punto cinco","1":"punto uno"}

If I wanna do a foreach I use the following:

for (var k in puntos){
    if (puntos.hasOwnProperty(k))
    {
        console.log("Key is " + k + ", value is" + puntos[k]);
    }
}

The secuence:

puntos":{"2":"punto dos","3":"punto tres","4":"punto cuatro","5":"punto cinco","1":"punto uno"}

The output is :

Key is 1, value ispunto uno
Key is 2, value ispunto dos
Key is 3, value ispunto tres
Key is 4, value ispunto cuatro
Key is 5, value ispunto cinco

My Question is why when I iterate over the array (puntos) the foreach alter the secuence of my array?

The secuence:

puntos":{"2":"punto dos","3":"punto tres","4":"punto cuatro","5":"punto cinco","1":"punto uno"}

The expected output

Key is 2, value ispunto dos
Key is 3, value ispunto tres
Key is 4, value ispunto cuatro
Key is 5, value ispunto cinco
Key is 1, value ispunto uno

You don't have an **array**. You have an **object literal**. The key/value pairs are not guaranteed order, simple as that. Don't rely on order here. If you want order, use an actual array (created with `[]` or `new Array()`, the former being preferred). Look at http://stackoverflow.com/a/280734/1317927 and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in#Description — Ian, Jul 22 '14 at 19:05
This is as expected. Object keys are considered unordered. Therefore any sequence is considered valid. If you want to retain sequence you must use an array, not an object. If you can't convince whoever sent you the json response to change this then there is nothing you can do. — slebetman, Jul 22 '14 at 19:16

score 1 · Answer 1 · answered Jul 22 '14 at 19:35

An interesting "why?".

The object you're creating as:

var a = {"puntos":{"2":"punto dos","3":"punto tres","4":"punto cuatro","5":"punto cinco","1":"punto uno"}};

will get the keys reordered automatically:

console.log(a)

Object {1: "punto uno", 2: "punto dos", 3: "punto tres", 4: "punto cuatro", 5: "punto cinco"}

But why does it happen?

Googling - there'se a mention of Chrome issue here, where the genesis of this behavior is discussed. As such browsers indeed don't respect the ordering of elements within objects, and even different version of the same browser can produce different results, simply because there's no ECMAScript standard regarding such ordering.

Now - what's the situation currently - from the tested browsers, IE11, Chrome, Firefox, Opera, all of them follow the same pattern of reordering numerical indexes. All also follow the "do not reorder" literal indexes.

And - what to do:

if you're retrieving the given set from the database, and then serializing, you can (I guess) easily make indexes to be literal (as - "_1" or "01")
if you're given a string which then you're parsing via JSON.parse method, you can still replace the numbers using .replace(/"(\d)*":/g, function(){ return '"_'+arguments[1]+'":' })
if you're manipulating JS object, then, sadly there's nothing you can do.

joeytwiddle · Accepted Answer · 2014-07-22T19:39:58.920

If you really want them in order, you can use non-numerical keys like this:

var puntos = {"p2":"punto dos","p3":"punto tres","p4":"punto cuatro","p5":"punto cinco","p1":"punto uno"};

Although the ECMAScript spec says there is no guarantee of the order of object properties, in reality all the engines retain the order, unless you use numerical keys, in which case some engines will sort the keys numerically as you have noticed.

An alternative way to store them in a real Array but with out-of-order keys would be to use an array of objects:

var puntos = [
    {
        key: "2",
        value: "punto dos"
    },
    {
        key: "3",
        value: "punto tres"
    },
    {
        key: "4",
        value: "punto cuatro"
    },
    {
        key: "5",
        value: "punto cinco"
    },
    {
        key: "1",
        value: "punto uno"
    }
];

Foreach in javascript alter the secuence of my array

2 Answers2