Sorting associative array of objects in javascript

Question

I have a particular array of objects in js that represent columns of a table. My object is:

var columns = {
  "image": {
    "show": false,
    "orderable": true,
    "value": 0,
    "displayOrder":2
  },
  "name": {
    "show": true,
    "orderable": true,
    "value": 1,
    "displayOrder":0
  },
  "company": {
    "show": false,
    "orderable": false,
    "value": 2,
    "displayOrder":1
  }
}

I have to order the object by "displayOrder", but using a function like

columns.sort(function(a, b) {
  return parseFloat(a.displayOrder) - parseFloat(b.displayOrder); 
});

obviously it return an error. How i can do this?

You have an object, and the properties of an object cannot be sorted. If you want to do this, `columns` needs to be an array. — Rory McCrossan, Oct 20 '17 at 12:41
Why you do `parseFloat` on integer? Better use `parseInt` then. — kevinSpaceyIsKeyserSöze, Oct 20 '17 at 12:42
Its not possible to sort an object, but you could create an arrayofobjects like shown here https://stackoverflow.com/questions/1069666/sorting-javascript-object-by-property-value — Doomenik, Oct 20 '17 at 12:43
Have a look at this: [Sorting JavaScript Object by property value](https://stackoverflow.com/questions/1069666/sorting-javascript-object-by-property-value?noredirect=1&lq=1) — lukas, Oct 20 '17 at 12:47
@RoryMcCrossan well but columns could be associative array where every associated value is another associative array — Rube, Oct 20 '17 at 12:48
I don't know what that's supposed to mean. JS has no equivalent of associative arrays. There are objects (ie. what you have in the code above) and arrays. The properties of objects are transient, and cannot be sorted. — Rory McCrossan, Oct 20 '17 at 12:51
Object properties in es6 and later do have an order but are still intended as unsorted hashmaps. If you want to do sorting, while technically possible with object properties (with some restrictions), you should really use another data structure. — ASDFGerte, Oct 20 '17 at 12:57
May be ... "I have to order the object by 'displayOrder' " should be written as "I need an array of columns object from the given object, sorted by displayOrder property value" — adnan2nd, Oct 21 '17 at 17:37

score 7 · Accepted Answer · edited Nov 25 '19 at 21:52

You may use .sort only on arrays due to it is Array.prototype method (MDN). So as an easiest solution I would prefer to reform your columns data from object to array:

var columnList = [
    {
      "key": "image",
      "value": {
          "show": false,
          "orderable": true,
          "value": 0,
          "displayOrder":2
      }
    },
    {
      "key": "name",
      "value": {
          "show": true,
          "orderable": true,
          "value": 1,
          "displayOrder":0
      } 
    },
    {
      "key": "company",
      "value": {
          "show": false,
          "orderable": false,
          "value": 2,
          "displayOrder":1
      } 
    }
];

var result = columnList.sort(function(a, b) {
    return parseFloat(a.value.displayOrder) - parseFloat(b.value.displayOrder);  
});

console.log(result);

The result of console.log would be exactly

0:{key: "name", value: {…}}
1:{key: "company", value: {…}}
2:{key: "image", value: {…}}

This transformation (from object to array) could be done programmatically via Object.keys:

result = Object.keys(columns)
  .map(c => ({ key: c, value: columns[c]}))
  .sort((a, b) => a.value.displayOrder - b.value.displayOrder)

Here the columns is your initial object. With the help of Object.keys() and .map() I turn it into the array I described before, so the .sort() method could be called in a chain.

I added some code to the answer to make the procedure work for `columns` object. — dhilt, Oct 20 '17 at 13:01
yes... thanks for sharing this solution, it worked very well here too!!! — Adriel Werlich, Jul 16 '20 at 19:55

Sorting associative array of objects in javascript

1 Answers1

Linked