Unwanted sorting of array

Question

I have the following code to get the order of elements. But instead of getting an array in the order of the elements, it's alphabetical.

function gatherTreeIds( $parent ){
    var GatheredIds = [];
    $parent.children('div.nt_row').each(function(){
        GatheredIds[ this.title ] = 'someValue';
    });
    return GatheredIds;
}

<div id="Wrap">
    <div class="nt_row" title="AAA"></div>        
    <div class="nt_row" title="CCC"></div>
    <div class="nt_row" title="BBB"></div>
</div>

Here is my jsFiddle example (check console for result). It gives me ['AAA','BBB','CCC'] instead of the desired ['AAA','CCC','BBB'].

Important! This has to get recursive. It is not at this moment to simplify the problem.

Works for me Chrome v30 `[AAA: "someValue", CCC: "someValue", BBB: "someValue"] (index):29` — Daniel Imms, Oct 15 '13 at 14:41
http://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order — moonwave99, Oct 15 '13 at 14:42
You are talking about `.push()` in the title, but that method does not even appear in your code. — CBroe, Oct 15 '13 at 14:44
@CBroe: Correct, my bad. I've been messing with this for a while, I lost track of what is doing what. End of workday here — Martijn, Oct 15 '13 at 14:45

score 4 · Accepted Answer · answered Oct 15 '13 at 14:45

You're confusing the two concepts of arrays and hashes. Arrays have order, while hashes have named keys, you can't have both in a data single structure.

With an array you would use:

var GatheredIds = [];
$parent.children('div.nt_row').each(function(){
    GatheredIds.push('someValue');
});
return GatheredIds;

If you want to record the item title, you can use an array of hashes:

var GatheredIds = [];
$parent.children('div.nt_row').each(function(){
    GatheredIds.push({value: 'someValue', title: this.title);
});
return GatheredIds;

Perfect, exactly what I was looking for. I used the second method because that allows me to go recursive without trouble — Martijn, Oct 15 '13 at 15:13

score 3 · Answer 2 · answered Oct 15 '13 at 14:41

3

This happens because you store titles as object properties. In your example GatheredIds is not array, this is an object.

Objects in JavaScript do not have order (opposite to PHP's map-arrays). If you need to follow the order, you should use arrays instead.

One possible solution:

function gatherTreeIds( $parent ){
    return $parent.children('div.nt_row').map(function() {
        return {
            title: this.title,
            value: 'someValue'
        };
    }).get();
}

DEMO: http://jsfiddle.net/FmyBb/4/

answered Oct 15 '13 at 14:41

VisioN

143,310
32
282
281

How is `var GatheredIds = []` creating an object instead of an array? – Scott Mermelstein Oct 15 '13 at 14:43
@ScottMermelstein, Arrays always have index, not property names. – Gurpreet Singh Oct 15 '13 at 14:44
2

@GurpreetSingh So what you and VisioN are saying is that `GatheredIds` is an array, but since the code is using syntax like `GatheredIds["AAA"] = 'someValue'`, those are being saved as object properties instead of array elements? – Scott Mermelstein Oct 15 '13 at 14:58
2

@ScottMermelstein: Exactly. – gen_Eric Oct 15 '13 at 14:58
Your answer is correct and explains it well, I can only mark one as vote, and peter's is more native JS which was more like I want. +1 though – Martijn Oct 15 '13 at 15:14
1

@Martijn Thanks! What do you mean by *more native JS*? I have just used the full power of jQuery, which made the code shorter and less temporary-variable-oriented. – VisioN Oct 15 '13 at 15:19
Small bits are faster in native js, for example `this.id` vs `$(this).attr('id')`. jQuery is great for some browser incompatibilities and animations and ajax and allot more, but I'd like to get to know/understand how JS works – Martijn Oct 15 '13 at 19:23

Unwanted sorting of array

2 Answers2