Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Sort a JS Object Literal?

If I have this JS object literal:

var foo = {
    Sussy: 4,
    Billy: 5,
    Jimmy: 2,
    Sally: 1
};

How can I create a new, sorted object literal:

var bar = {
    Sally: 1,
    Jimmy: 2,
    Sussy: 4,
    Billy: 5
};
like image 711
edt Avatar asked Jun 07 '11 15:06

edt


People also ask

Can you sort objects JavaScript?

Arrays of objects can be sorted by comparing the value of one of their properties.

How do I sort a key object?

To sort the keys of an object:Use the Object. keys() method to get an array of the object's keys. Call the sort() method on the array. Call the reduce() method to get an object with sorted keys.

What is a literal object in JavaScript?

Object Literal. In plain English, an object literal is a comma-separated list of name-value pairs inside of curly braces. Those values can be properties and functions.

How do you iterate over an object in JavaScript?

There are two methods to iterate over an object which are discussed below: Method 1: Using for…in loop: The properties of the object can be iterated over using a for..in loop. This loop is used to iterate over all non-Symbol iterable properties of an object.


2 Answers

Turns out object property order is predictable since ES2015. Which is amazing.

Check it out here.

like image 101
Mike Kellogg Avatar answered Oct 18 '22 17:10

Mike Kellogg


Re: How to sort a JS Object?

Answer: You can't. So instead, you need a more sophisticated data structure. You have many options:

  1. You can use a separate array to hold the order of the object's keys. (This is what @Felix Kling's answer demonstrates.) Good: fast retrieval via order or name. Bad: needs a second data structure that must be kept synched with the first.
  2. Instead of the Object simply holding properties and values, the properties could hold Objects which hold the values and a sort order. Good: 1 data structure. Fast lookup by property name. Bad: slow lookup by order (need to scan the structure). Slow sorting.
  3. Use an array, with elements consisting of Objects that hold the key and the value. Good: 1 data structure. Fast lookup by order. Fast sorting. Bad: slow lookup by property name (need to scan the structure).

I recommend solution 3 since it uses the JS mechanics to manage the ordering.

Examples:

// Object holds sort order:  (Solution 2)
var foo = {
  Suzy: {v: 4, order: 0},
  Billy: {v: 5, order: 1},
  Jimmy: {v: 2, order: 2},
  Sally: {v: 1, order: 3}
};    

// Array holds keys: (Solution 3)
var woof = [
  {k: 'Suzy', v: 4},
  {k: 'Billy', v: 5},
  {k: 'Jimmy', v: 2},
  {k: 'Sally', v: 1}
];

// Sort the woof array by the key names:
woof.sort(function(a, b) {
  return a.k.localeCompare(b.k);
});

// The third key and value:
woof[2].k; // the third key
woof[2].v; // the third value

Edited: updated code to fix typo. Thank you, @Martin Fido

like image 24
Larry K Avatar answered Oct 18 '22 18:10

Larry K