Sort an object array by multiple properties in JavaScript

This post will discuss how to sort an object array by multiple properties in JavaScript.

Sorting an array of objects by multiple attributes in JavaScript is a common task that can be achieved in different ways. Here are some examples of how to sort an array of objects by multiple attributes in JavaScript given an array and a list of properties to sort by:

1. Using a comparison function

This is a common technique that works in any version of JavaScript. It involves passing a custom compare function to the Array.sort() function, which defines how to compare two elements in the array. The compare function should return a negative, zero, or positive value, depending on whether the first element is less than, equal to, or greater than the second element. To sort an array of objects by multiple attributes, we can use a loop or a chain of comparisons to compare the elements by each attribute until a non-zero value is returned. For example, if we have an array of employee objects and we want to sort it by salary in descending order, then by name in ascending order, then by age in ascending order, we can do:

let employees = [

{ name: "Joseph", salary: 40000, age: 30 },

{ name: "Anthony", salary: 25000, age: 20 },

{ name: "Oliver", salary: 50000, age: 35 },

{ name: "Benjamin", salary: 40000, age: 25 }

];

employees.sort(function(a, b) {

// compare salary first

let diff = b.salary - a.salary;

if (diff !== 0) {

return diff;

}

// if salary is equal, compare name

diff = a.name.localeCompare(b.name);

if (diff !== 0) {

return diff;

}

// if name is equal, compare age

return a.age - b.age;

});

console.log(employees);

Download Run Code

Output:
[ { name: "Oliver", salary: 50000, age: 35 }, { name: "Benjamin", salary: 40000, age: 25 }, { name: "Joseph", salary: 40000, age: 30 }, { name: "Anthony", salary: 25000, age: 20 } ]

2. Using ES6 arrow function and spread operator

These are the new features of JavaScript that allows writing concise functions with a shorter syntax and expanding iterables into individual elements. It involves using an arrow (=>) to define a compare function for the sort() function and using the spread operator (…) to pass an array of attributes to sort by as arguments. We can use the same logic as the previous example, but with a simpler syntax. For example, if we want to sort the employees by salary in descending order, then by age in ascending order, we can do:

let employees = [

{ name: "Joseph", salary: 40000, age: 30 },

{ name: "Anthony", salary: 25000, age: 20 },

{ name: "Oliver", salary: 50000, age: 35 },

{ name: "Benjamin", salary: 40000, age: 25 }

];

let sortBy = (...props) => (a, b) => {

// loop through the properties

for (let prop of props)

{

// get the property name and order

let [name, order] = prop[0] === "-" ? [prop.slice(1), -1] : [prop, 1];

// compare the elements by the property

let diff = (a[name] - b[name]) * order;

// if the elements are not equal, return the difference

if (diff !== 0) {

return diff;

}

// if all properties are equal, return zero

return 0;

};

employees.sort(sortBy("-salary", "age"));

console.log(employees);

Download Run Code

Output:
[ { name: "Oliver", salary: 50000, age: 35 }, { name: "Benjamin", salary: 40000, age: 25 }, { name: "Joseph", salary: 40000, age: 30 }, { name: "Anthony", salary: 25000, age: 20 } ]

3. Using a library

If we don’t want to write our own sorting function, we can use a library or framework that provides a built-in or custom function to sort an object array by multiple properties. For example, we can use lodash’s orderBy() function, which takes an array, an array of property names or iteratees, and an array of sorting orders as arguments. For example, to sort an array of employees by salary in descending order and then by age in ascending order, we can use this function:

// import the library

const _ = require("lodash");

let employees = [

{ name: "Joseph", salary: 40000, age: 30 },

{ name: "Anthony", salary: 25000, age: 20 },

{ name: "Oliver", salary: 50000, age: 35 },

{ name: "Benjamin", salary: 40000, age: 25 }

];

let sortedEmployees = _.orderBy(employees, ["salary", "name"], ["desc", "asc"]);

console.log(sortedEmployees);

Download Code

Output:
[ { name: "Oliver", salary: 50000, age: 35 }, { name: "Benjamin", salary: 40000, age: 25 }, { name: "Joseph", salary: 40000, age: 30 }, { name: "Anthony", salary: 25000, age: 20 } ]

That’s all about sorting an object array by multiple properties in JavaScript.

Sort an object array by multiple properties in JavaScript

1. Using a comparison function

2. Using ES6 arrow function and spread operator

3. Using a library

Share this: