How to sort this javascript array of objects by its keys?

Question

I have an array similar to this one in a JSON file.

data = {
    "foo" : {
        "08" : {"bar": "1", "baz":"2"},
        "09" : {"bar": "3", "baz":"10"},
        "10" : {"bar": "5", "baz":"3"},
        "11" : {"bar": "8", "baz":"8"},
        "12" : {"bar": "9", "baz":"8"}
     },
     "foo_2" : {
        "01" : {"bar": "1", "baz":"2"},
        "02" : {"bar": "1", "baz":"2"}
        //03, 04 and so on..
     }
}

Let's say I want to get the objects from the first foo key, so using data.foo will do just fine. Now, when iterating through data.foo, the indexes will not come in the order shown on the file. I think it's due to the fact the indexes are strings instead of numbers, but still, they'll come in the following order:

{
    "12" : {"bar": "9", "baz":"8"},
    "11" : {"bar": "8", "baz":"8"},
    "10" : {"bar": "5", "baz":"3"},
    "08" : {"bar": "1", "baz":"2"},
    "09" : {"bar": "3", "baz":"10"}
}

Tried many things here and did a lot of reasearch here in SO but found few topics on the subject and they all will sort the array based in a value deep inside the array, like bar for example.

how would you sort this array only by those first numbered indexes, so they come out just like they're organized in the file ?

Is there a reason you aren't using an array for the values with the numeric keys? — Sascha Wolf, Mar 14 '14 at 19:13
[Does JavaScript Guarantee Object Property Order?](http://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order) — epascarello, Mar 14 '14 at 19:16
It would seem, in this case due to the numeric nature of the "properties", that the JS seems to be sorting the numbers in the order 1-0, and not 0-9. As some users suggest, you should be trying a pure array structure instead of objects. Though this still happens when using an array. It might have to do with the keys being a string, and not numeric. Yep, making the array keys numeric returns the keys in order of smaller to greater. — SparoHawk, Mar 14 '14 at 19:19
@ErickMartim Instead of using `"foo": { "01": ... }` you could use the array annotation `"foo": [ {"bar": "1", "baz":"2"}, ... ]`. — Sascha Wolf, Mar 14 '14 at 19:19
@SparoHawk - If it's sorting, it's just a fluke. There's nothing to sort here, it's just key / value pairs that can't be sorted. — adeneo, Mar 14 '14 at 19:21
@adeno Noted. Thanks for the heads-up :). I was just curious myself so I started to poke with the object and then switched to an array using the keys as string, but it produced the same result as the object. I then switched the keys to numbers and they are returned in proper order. — SparoHawk, Mar 14 '14 at 19:25
If you want to access by sorted order, get keys first into an array `Object.keys(data.foo)`, sort it and access the array in the order of keys array.. — palanik, Mar 14 '14 at 19:25
I see what you guys are saying and I agree. Shouldn't have been done like that in the first place but you see, I have the JSON files like this and I just can't change them, have to use them like they came to me... So, sticking to the topic, is there a way to iterate through them in the correct order or not ? — Erick Martim, Mar 14 '14 at 19:27
@palanik thinking bout it now, that might actually work... gonna try it and see ! thanks :) — Erick Martim, Mar 14 '14 at 19:28
@SparoHawk - sorting objects will actually work in all modern browsers, but it's just that the spec specifially says that objects have no guaranteed order, so you can't rely on it. — adeneo, Mar 14 '14 at 19:30
@palanik: That doesn't return the keys in the order they are defined though. Specifically numeric keys will most likely be ordered by their value. If that's what is desired then it's ok, but it should be noted that this is just a happy coincidence. — Felix Kling, Mar 14 '14 at 19:42
@FelixKling That is correct. The defined order is lost once it's loaded in memory. But my suggestion is if the OP wants to iterate the content in some sorted order... (I intentionally mentioned sorted order to diff. from source order). — palanik, Mar 14 '14 at 19:47

score 0 · Accepted Answer · edited May 23 '17 at 11:57

Ok, got it to work based on the comment from @palanik, thank you very much, man !

here's how:

// variable which receives the selected object to iterate through
var foo = data.foo;

// here we sort the keys out of the array of objects and map them to another variable,
// sorting by the keys as numbers instead of strings, using the parseInt() function
var sortedArray = Object.keys(foo).sort(function(a,b){
    return parseInt(a,10) - parseInt(b,10);
}).map(function(sortedKeys){
    return foo[sortedKeys];
});

console.log(sortedArray);
// returns the array of values without the keys, but in the desired order, like this
//[
//    {"bar": "1", "baz":"2"},
//    {"bar": "3", "baz":"10"},
//    {"bar": "5", "baz":"3"},
//    {"bar": "8", "baz":"8"},
//    {"bar": "9", "baz":"8"}
//]

Posting in the hope someone else won't lose their whole day trying to figure out something so simple (like I just did) out there lol...

Thank you guys for the insightful comments above and again, thanks palanik ! :)

How to sort this javascript array of objects by its keys?

1 Answers1