How to keep an Javascript object/array ordered while also maintaining key lookups?

I have some data which I originally stored in a generic Javascript object, with the ID as a key:

{
  "7": {"id":"7","name":"Hello"},
  "3": {"id":"3","name":"World"},
  ...
}

However, I discovered that browsers do not guarantee a particular object order when looping through them, so in the above “3” would come before “7”. I switched to using an array format like this:

[
  {"id":"7","name":"Hello"},
  {"id":"3","name":"World"},
  ...
]

Now, I can loop in the correct order but cannot do fast lookups, e.g. data["3"] without having to loop through the array.

Is there a good way to combine both approaches? I would rather avoid using a separate object for each format, because the object is pretty large (hundreds of elements).

Answer

I have run across this problem as well. A solution is to keep an ordered array of keys in addition to the original object.

var objects = {
  "7": {"id":"7","name":"Hello"},
  "3": {"id":"3","name":"World"},
  ...
}
var order = [ "3", "7", ... ];

Now if you want the second element you can do this lookup:

var second_object = objects[order[1]];

The ECMA standard does not say anything about the order of the elements in an object. And specifically Chrome reorders the keys when they look like numbers. Example:

var example = {
    "a": "a",
    "b": "b",
    "1": "1",
    "2": "2"
};

if you print this in Chrome will get something like:

{
    1: "1",
    2: "2",
    "a": "a",
    "b": "b"
};

It’s a little sour .. but life.

You could use the solution Andy linked as well, basically wrapping these two together in one object.

An alternative that I use a lot is a custom map function that allows you to specify the order in which the object is traversed. Typically you will do sorting when you’re printing your data to the user so while you loop and create your table rows (for instance) your iterator will pass the rows in the order your sort function specifies. I thought it was a nice idea 🙂

The signature looks like:

function map(object, callback, sort_function);

Example usage:

map(object, function (row) {
   table.add_row(row.header, row.value);
}, function (key1, key2) {
   return object[key1] - object[key2];
});