Let's find out how to sort an array of objects by a property value
How to sort an array of objects by a property value in JavaScript?
Let’s say we have an array of books (objects) like this
const books = [
{
author: 'Erich Gamma',
published: 782708400000, // October 21, 1994
title: 'Design Patterns',
},
{
author: 'Robert C. Martin',
published: 1217559600000, // August 1, 2008
title: 'Clean Code',
},
{
author: 'Robert C. Martin',
published: 1304478000000, // May 4, 2011
title: 'The Clean Coder',
},
{
author: 'Martin Fowler',
published: 915159600000, // January 1, 1999
title: 'Refactoring',
},
{
author: 'David Thomas',
published: 938746800000, // October 1, 1999
title: 'The Pragmatic Programmer',
},
];
Note: By the way excellent list of books, highly recommended โ๏ธ
Now let’s say that you probably want to render this list of books, but first you want to order it by the value of one of the books (objects) properties.
For example you want to order it by the title
in alphabetical order
To do this can use the sort
method of the Array
, this method sorts the elements of an array in place and returns the sorted array
Note: This method mutates the array
The default sort order is ascending, built upon converting the array elements into strings and then comparing their values
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]
This method can also take an optional parameter compareFunction
, that will be used to define the sort order, this function will take as parameters two object, the first and second element for comparison.
For our case, we will be using a comparreFunction
and to simplify our elements we will call them a
and b
So, let’s sort the array of books
by title
in ascending alphabetical order
books.sort((a, b) => (a.title > b.title) ? 1 : -1);
console.log(books);
// expected output: Array[
// {
// author: 'Robert C. Martin',
// published: 1217559600000,
// title: 'Clean Code',
// },
// {
// author: 'Erich Gamma',
// published: 782708400000,
// title: 'Design Patterns',
// },
// {
// author: 'Martin Fowler',
// published: 915159600000,
// title: 'Refactoring',
// },
// {
// author: 'Robert C. Martin',
// published: 1304478000000,
// title: 'The Clean Coder',
// },
// {
// author: 'David Thomas',
// published: 938746800000,
// title: 'The Pragmatic Programmer',
// },
// ]
Note: For descending order you can switch the
1
and the-1
When we return 1
, the function will take the b
element with precedent in the sorting over the element a
, returning -1
would be the opposite
Remember that in the compareFunction
you have access to the full element, that is to say, if you require another extra field to compare you can directly use it, maybe if you face the case where books have exactly the same name (another version) you could do the sort by the published
field for example