JavaScript automatically sorts dict?

Question

So, the problem is that when ajax script receives dictionary from server it gains different order:

Server sent this:

{753: 'Wraith', 752: 'Phantom Extended', 751: 'Phantom', 750: 'Ghost Extended', 749: 'Ghost', 748: 'Dawn', 747: 'Cullinan', 746: 'Black Badge'}

But client gets this:

{746: "Black Badge", 747: "Cullinan", 748: "Dawn", 749: "Ghost", 750: "Ghost Extended", 751: "Phantom", 752: "Phantom Extended", 753: "Wraith"}

Js:

$.ajax({
    method: 'GET',
    url: request_url,
    success: function(data){
        console.log(data.response_models);
        ...

Also, the server is running on Django

Please help! I really appreciate it

Objects in JavaScript are unordered. Or rather, you can't rely on objects being ordered the way you want. — Andy, Jun 09 '21 at 14:46
@Andy, But how does this happen? Why server sends one thing but on a client side i get different thing? — Daniil, Jun 09 '21 at 14:47
You should treat them as unordered, just like Python dictionaries. However, many (all?) object "iteration" functions will iterate over numerical properties in ascending order first, then string properties in insertion order, then symbols. — Felix Kling, Jun 09 '21 at 14:48
Can you re-order the keys in an array and access the object based on that? — mykaf, Jun 09 '21 at 14:48
How is that a good (or at all) dupe target? The accepted answer (_"`console.log` does indeed sort the properties"_) is wrong and there's no "original order" after the JSON has been parsed. — Andreas, Jun 09 '21 at 14:55
Someone closed question because he suggested that this is solution: https://stackoverflow.com/questions/39054764/show-original-order-of-object-properties-in-console-log This didn't solve the problem, the thing is that, i want the dict values to be sorted in alphabetical order because js script inserts the keys and values in pairs in the select input. And being alphabetically sorted, this looks better and is user-friendly — Daniil, Jun 09 '21 at 14:55
Then just sort them (`Object.entries()` + `Array.prototype.sort()`) before you add them to the DOM — Andreas, Jun 09 '21 at 14:56
Read the documentation and the examples for the mentioned methods over -> https://developer.mozilla.org/en-US/ — Andreas, Jun 09 '21 at 15:18

score 1 · Accepted Answer · answered Jun 09 '21 at 16:04

If your object has properties that are "indexes" (numeric strings in range 0 .. 2^32-1), these properties are always enumerated is sorted numeric order. There's no way you can change that.

Have your server app return data in a more reasonable format, like an array of number-string pairs or an array of objects {id, value}. If this is not possible, convert your object to the said format on the client side, for example:

response = {753: 'Wraith', 752: 'Phantom Extended', 751: 'Phantom', 750: 'Ghost Extended', 749: 'Ghost', 748: 'Dawn', 747: 'Cullinan', 746: 'Black Badge'}

dataToDisplay = Object.entries(response).sort(
    ([key1, val1], [key2, val2]) =>
        val1.localeCompare(val2))

console.log(dataToDisplay)

Thank you so much! Swapping keys and values was the best and simplest solution! — Daniil, Jun 09 '21 at 16:50

JavaScript automatically sorts dict?

1 Answers1