Search code examples
javascriptinternet-explorermootools

MooTools inject json data into select is backwards in IE

I am returning some json data from PHP and using MooTools (1.5.1) to inject the items in the json object into a select box. This works great, but in IE (11), the select element gets populated exactly backwards of what I intended. Firefox and Chrome are correct. The data I'm returning is a list of db key and date/time values. Each pair would be a row in the select element. Here is an example of the returned json data:

{"26165":"2015-03-03 06:11:17","26145":"2015-03-03 05:11:17","26125":"2015-03-03 04:11:17","26105":"2015-03-03 03:11:17"}

I can't post images... But Chrome and Firefox populate the select element in the exact order shown above (most recent at top), and IE populates in the exact opposite order (most recent at bottom). The code used to inject the items into the select element is below. This code snip is in a MooTools "Request.JSON" in the "onSuccess" block.

Object.each(list, function(value, key){
    new Element('option', {'value':key, 'text':value}).inject(select_element);
});

So again, this works perfect for Chrome and Firefox, so I reasonably believe the way I'm injecting the values into the select element is right, but why does it end up upside down in IE? I was thinking that maybe IE is sorting these items by the 'value' when they are inserted, that would give the upside down problem, because the json data shown above is in DESC order. (Where Chrome/FF display exactly as inserted, and maybe IE sorts on the value which causes them to be changed to ASC order?).

Thanks for any help or hints!

Solution

  • this is nothing to do with MooTools - but basically, as @sergio said, ECMA script does not guarantee the order of indices as you iterate through member properties. FIFO is nice but not always.

    All the spec says is:

    4.3.3 Object

    An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method.

    Also, see section 12.6.4:

    The mechanics and order of enumerating the properties ... is not specified.

    http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf

    Different browsers handle this differently, eg. when you for (var key in obj) where key has numeric and string values, the numeric ones will come out first. FireFox, it's FIFO. IE - something else.

    The only thing open to you is to pad the keys with _ so they are treated as simple strings - or use an array like [{key: 12313, value: 'some date'}]