Javascript developers get this problem very often. When we deal with rest API responses, we often receive an array of complex objects as a result. API’s can give us a sorted result to an extent. But in UI, when we try to represent that result in multiple forms, we do some preprocessing.
Today I am going to explain how to sort an array of objects in javascript. To be more specific, I am going to describe various methods of sorting.
Below are the three ways of sorting I am going to explain
- Sort an array of objects by a string
- Sort an array of objects by number
- Sort an array of date
I am going to solve all of these three problems using the sort()
function.
Sort() function in javascript
The sort()
function takes only one parameter, a compare function. Compare function contains the logic that performs an in-place comparison between two values and applies sort logically.
Below is an example, to sort an integer array in ascending order.
var numbers = [40, 100, 1, 5, 25, 10]; numbers.sort(function(a, b){return b-a}); console.log(numbers); // [1, 2, 5, 10, 25, 40, 100]
In the above function, the comparison function is simple.
function(a, b) { return a-b; }
If you interchange a-b
to b-a
in the function, then you will get an array sorted in descending order.
Similarly, we will implement all three problems by changing the logic in the compare function.
Example array of objects
let cars= [ { name: 'Swift', batchNumber: 391, mfgDate: 'July 1, 2019' }, { name: 'Corolla', batchNumber: 142, mfgDate: 'January 19, 2019' }, { name: 'Zen', batchNumber: 213, mfgDate: 'March 23, 2019' } ];
Sort an array of objects by a string
The cars array objects have a string property name
. Below is the code which will sort all the objects in ascending order depending on the name
property value.
cars.sort((a, b) => {
if (a.name < b.name) { return -1; } if (a.name > b.name) {
return 1;
}
return 0;
});
Result array:
let cars= [
{
name: 'Corolla',
batchNumber: 142,
mfgDate: 'January 19, 2019'
},
{
name: 'Swift',
batchNumber: 391,
mfgDate: 'July 1, 2019'
},
{
name: 'Zen',
batchNumber: 213,
mfgDate: 'March 23, 2019'
}
];
Sort an array of objects by number
The cars array objects have a number property batchNumber
. Below is the code which will sort all the objects in ascending order depending on the batchNumber
property value.
cars.sort((a, b) => {
return a.batchNumber - b.batchNumber;
});
Result array:
let cars= [
{
name: 'Corolla',
batchNumber: 142,
mfgDate: 'January 19, 2019'
},
{
name: 'Zen',
batchNumber: 213,
mfgDate: 'March 23, 2019'
},
{
name: 'Swift',
batchNumber: 391,
mfgDate: 'July 1, 2019'
}
];
Sort an array of objects by date
The cars array objects have a number property mfgDate
. Below is the code which will sort all the objects in ascending order depending on the mfgDate
property value.
cars.sort((a, b) => {
return new Date(a.mfgDate) - new Date(b.mfgDate);
});
Result array:
let cars= [ { name: 'Corolla', batchNumber: 142, mfgDate: 'January 19, 2019' }, { name: 'Zen', batchNumber: 213, mfgDate: 'March 23, 2019' }, { name: 'Swift', batchNumber: 391, mfgDate: 'July 1, 2019' } ];
The sort function is powerful. It is easy to use and reduces the requirement of any external library for sorting.