jQuery: $.getJSON sorting the data on Chrome / IE?

Question

I'm passing an associative array (id => val) using Ajax and receiving it with jQuery's $.getJSON which read the data properly and prepared the object. There is, however, very annoying sorting issue.

It appears that on Chrome and IE the data becomes sorted by the id part of the associate array. So if the array should be (5=> 'xxx', 3 => 'fff') it actually becomes (3 => 'fff',5=> 'xxx'). On FireFox it works as expected, i.e. not sorted.

Any ideas?

Found a similar question: http://stackoverflow.com/questions/5020699/how-do-you-stop-chrome-and-opera-sorting-json-objects-by-index-asc — Collector, Feb 21 '12 at 19:54

score 2 · Answer 1 · edited Nov 09 '12 at 06:29

2

You can add a leading 0 for all integer indexes.

var json = { '05' => 'xxx', '03' => 'fff' };

edited Nov 09 '12 at 06:29

FThompson

28,352
13
60
93

answered Nov 09 '12 at 06:10

Janath

31
3

Kevin B · Answer 2 · 2012-02-22T03:11:27.537

0

Another option is to return the data as an array of objects. That will ensure that the objects stay in the order that you return them.

Edit:

Basically, for each key > value pair, push it to a new array and json_encode that array.

edited Feb 22 '12 at 03:11

answered Feb 21 '12 at 14:56

Kevin B

94,570
16
163
180

It's currently encoded with PHP using: json_encode($arChoices, JSON_FORCE_OBJECT) - what would you suggest then? – Collector Feb 21 '12 at 19:29
Trying to wrap the array in another array still doesn't do the job. On Chrome these appear as objects but their content is still sorted. – Collector Feb 21 '12 at 19:36
I haven't done much php, but I would try removing the optional option parameter. `json_encode($arChoices)` – Kevin B Feb 21 '12 at 19:37
Wouldn't make a difference as this is the default for associate arrays http://www.php.net/manual/en/function.json-encode.php – Collector Feb 22 '12 at 02:31
I'm not sure what the syntax is, but you need to turn it into an actual array, with indexes 0-n where each value in the array is an associative array containing the id and value. Look at it this way. In JavaScript, an associative array is represented as an Object, and object keys/values have no order. Therefore, you need to return it as an array containing associative arrays. – Kevin B Feb 22 '12 at 02:59
What code are you using to build the associative array? Given code, I should be able to suggest how to change it to make it return an array of objects(aka associative arrays in php) – Kevin B Feb 22 '12 at 03:02
You can see my own solution below. Thanks. – Collector Mar 08 '12 at 11:46

score 0 · Accepted Answer · answered Feb 22 '12 at 02:36

Seems the best way is to avoid associative arrays at all. When you want to send an associate array simply send it as two separate arrays - one of keys and one of values. Here's the PHP code to do that:

    $arWrapper = array();
    $arWrapper['k'] = array_keys($arChoices);
    $arWrapper['v'] = array_values($arChoices);
    $json = json_encode($arWrapper);

and the simple JavaScript code to do whatever you'd like with it

            for (i=0; i < data['k'].length; i++) {
                console.log('key:' + data['k'][i] + ' val:' + data['v'][i]);
            }

jQuery: $.getJSON sorting the data on Chrome / IE?

3 Answers3

Linked