68

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).

DisgruntledGoat
  • 70,219
  • 68
  • 205
  • 290
  • 5
    possible duplicate of [Javascript data structure for fast lookup and ordered looping?](http://stackoverflow.com/questions/3549894/javascript-data-structure-for-fast-lookup-and-ordered-looping) – Andy Hume Apr 24 '11 at 23:34
  • Not sure there's a better way of achieving this than the answer I've linked to. It breaks your goal of avoiding separate objects for each - but I'd love to know a better way! :) – Andy Hume Apr 24 '11 at 23:36
  • 1
    [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) (since ECMAScript 2015 aka ES6). – ShreevatsaR May 18 '18 at 23:03

2 Answers2

82

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];
});
Halcyon
  • 57,230
  • 10
  • 89
  • 128
  • Great idea, thanks! I actually did the reverse of what you suggested and kept the main data storage as an array (for better looping), then I store the array indices in an object, generated on the fly. – DisgruntledGoat Apr 26 '11 at 22:36
  • Wouldn't it be easier to simply assign the values to indices with a normal for(var i; i – MJB Oct 18 '12 at 08:19
2

Rather than coding your own, there are off-the-shelf libraries available to provide "as provided" JSON parsing or "consistently sorted" JSON printing for display.

You might well consider either of these:

  • The 'json-order' package offers parsing, formatting & pretty-printing with stable ordering. This is based on having ordered input.
  • The 'fast-json-stable-stringify' package offers deterministic formatting based on sorting.
Thomas W
  • 13,940
  • 4
  • 58
  • 76