Google Chrome: JavaScript associative arrays, evaluated out of sequence

Question

Ok, so on a web page, I\'ve got a JavaScript object which I\'m using as an associative array. This exists statically in a script block when the page loads:

v         


        

Answer 1

The order in which elements are stored in an associative array is not guaranteed. You'll have to sort your output explicitly.

Answer 2

Think of an associative array as a paper sack into which all the key-value pairs are placed. As you reach your hand into the sack to look at the pairs (such as with the for...in loop), the order that you encounter them is for all practical purposes random.

If you want to see them in a specific order, you'll need to extract the keys into an array and sort it. Then walk across the array, using the keys you encounter to index into the associative array.

Answer 3

Contrary to all the other answers, it is CERTAINLY A BUG IN CHROME

The reason:

If the data structure is a paper sack like Barry said then:

The values should always be randimized. This is not the case in chrome

If the data structure is sequential then:

The values should be in the sequence in which they are added to the structure

While other browsers follow the second approach, chrome follows neither and there is still no explanation of what is the sorting order chrome makes up for the data structure while it is accessed.

Answer 4

As pointed out Chrome's behaviour is perfectly valid.

This is a good case of where some OO thinking can help. Do you really want an associative array or just a list of objects?

var salesWeeks = [
    ["200911", "11 / 2009", "Fiscal 2009"],
    ...
]
...
for(var key in salesWeeks)
{
    arr.push(
        "<option value=\"" + salesWeeks[key][0] + "\">" +
        salesWeeks[key][1] + " (" + salesWeeks[key][2] + ")" +
        "<\/option>"
    );
}

would serve you better I think (to those that advocated some form of sort, the order is already defined - why do you want to do extra work?)

Answer 5

It's not a real good practice but...

If you add a space to the value chrome will not consider value a number and won't sort them by value.

Example:

<select>
  <option value=" 3">Third</option>
  <option value=" 1">First</option>
  <option value=" 2">Second</option>
</select>

The good side is that you have not to add and then remove alphabetic characters from ID like someone suggested (don't remember if in this or other post with similar question), you could easily trim it but most of the times the space is just ignored and if you post or get those to another file they will simply see the integer value not the space.

Answer 6

As the other answers say, the order in which an object's properties are iterated is not defined in the spec, even though the major browsers all iterate them in the defined order.

Chrome will enumerate them in order too, if all of the object's properties contain primitive values. John Resig gives more detail on Chrome's behavior here (under "for loop order"): http://ejohn.org/blog/javascript-in-chrome/