CODEWITHSUNDEEP
javascriptjquery
RHarris
RHarris

Reputation: 11227

Sort order discrepancy in javascript key value objects

I've set up a jsFiddle example of my problem: Example

Given this html:

<select id="drop1" data-jsdrop-data="countries"></select>
<select id="drop2" data-jsdrop-data="countries2"></select>​

And the following javascript:

var countries = {"1" : "Albania", "5" : "Australia","2": "United Arab Emerates"};
var countries2 = {"AL" : "Albania", "AU" : "Australia", "AE" : "United Arab Emerates"};


function loadJSOptions(selector, list) {
    $.each(list, function (key, value) {
        $(selector).append($("<option></option>").val(key).html(value));
    }
});

$(document).ready(function() { 
    $('select[data-jsdrop-data]').each(function() {
       var selector = $(this);
       var listname = selector.attr("data-jsdrop-data");
       var listvalue = null;
       eval("listvalue = " + listname + ";");
       loadJSOptions(selector, listvalue);
    });
});

​ Can anyone explain to me why the list with the Alpha key gets listed based on the order entered while the list with the numeric key gets sorted based on the key? If you look at the jsFiddle results, you'll see that drop1 shows Albania, United Arab Emerates, Australia while drop2 shows Albania, Australia, United Arab Emerates.

Thanks for your help.

Upvotes: 0

Views: 301

Answers (4)

RobG
RobG

Reputation: 147453

You can build the options much more efficiently using:

$('select[data-jsdrop-data]').each(function() {
    var list = window[this.getAttribute('data-jsdrop-data')];
    var i = 0;
    for (var p in list) {
        this.options[i++] = new Option(p, list[p]);
    }
});

Upvotes: 0

Bergi
Bergi

Reputation: 665030

Object properties are not ordered, if you enumerate them the order is implementation-defined. They often are stored in the order the object literals were parsed, but you can't rely on that. For example, numeric keys (as in countries1) seem to be sorted in your browser.

If you want a definite order, use an array (an object with numeric keys) and iterate them:

var lists = {
    countries1: [
        {key:"1", val:"Albania"},
        {key:"5", val:"Australia"},
        {key:"2", val:"United Arab Emerates"}
    ],
    countries2: [
        {key:"AL", val:"Albania"},
        {key:"AU", val:"Australia"}, 
        {key:"AE", val:"United Arab Emerates"}
    ]
};

$(document).ready(function() { 
    $('select[data-jsdrop-data]').each(function() {
        var $this = $(this),
            listname = $this.attr("data-jsdrop-data"),
            list = lists[listname]; // don't use eval!
        for (var i=0; i<list.length; i++) {
            var item = list[i];
            $this.append($("<option>").val(item.key).text(item.value));
        }
    });
});

A for-loop is much faster and more intuitive than $.each. Don't use that when you don't know exactly what it does and when you need it.

Upvotes: 1

Travis J
Travis J

Reputation: 82297

Using jQuery's $.each defaults to for( a in b ) which does not guarantee order. This is why you are seeing the order seem non-sequential or unexpected.

Upvotes: 0

Mike Brant
Mike Brant

Reputation: 71414

I believe if you have a numerical property on an object, that jQuery.each() will need to use array-type access to the property (i.e. countries[1], countries[2], countries[5]). Because of this it will iterate through in numerical index order.

Upvotes: 0

Related Questions