A very common requirement developers encounter while working with javascript objects and arrays is to sort an array of objects. This article demonstrates easy ways to sort an array of objects by different property values using various example illustrations.
Table of Contents:
- Sort an Array of Objects with String Property Value
- Sort an Array of Objects with Number Property Value
- Sort an Array of Objects with Date Property Value
In the below examples, we will be using the sort() method to sort property values of different types. We will also be passing the compare() function in the argument of the sort() method to define how one should sort the properties. Here we will be writing our compare() function to provide the correct definition of the sort.
Javascript’s sort() method sorts all the array elements and returns the sorted array.
The compare() function, when passed as an argument in the sort() method, defines the sorting order.
Sort an Array of Objects with String Property Value
Example:-
Sort the below array of objects based on the personName property
[ { personName: ‘Veronica’, age:24 , dateOfSubmission: ‘Nov 24 2021’}, { personName: ‘Eva’, age:17, dateOfSubmission: ‘Oct 31 2021’}, { personName: ‘Paul’, age:35, dateOfSubmission: ‘Nov 15 2021 }]
Code:-
var myArray = [
{ personName: 'Veronica', age:24 , dateOfSubmission: 'Nov 24 2021'},
{ personName: 'Eva', age:17, dateOfSubmission: 'Oct 31 2021'},
{ personName: 'Paul', age:35, dateOfSubmission: 'Nov 15 2021' }
];
//write your own comparison function
//pass two objects
function compare( obj1, obj2 ) {
// compare the objects based on personName property
if ( obj1.personName < obj2.personName ){
return -1;
}
if ( obj1.personName > obj2.personName ){
return 1;
}
return 0;
}
// print the sorted array
console.log(myArray.sort(compare));
Output:-
[
{ personName: 'Eva', age: 17, dateOfSubmission: 'Oct 31 2021' },
{ personName: 'Paul', age: 35, dateOfSubmission: 'Nov 15 2021' },
{ personName: 'Veronica', age: 24, dateOfSubmission: 'Nov 24 2021' }
]
The objects within the array are now sorted based on the personName.
Sort an Array of Objects with Number Property Value
Example:-
Sort the below array of objects based on the age property
[ { personName: ‘Veronica’, age:24 , dateOfSubmission: ‘Nov 24 2021’}, { personName: ‘Eva’, age:17, dateOfSubmission: ‘Oct 31 2021’}, { personName: ‘Paul’, age:35, dateOfSubmission: ‘Nov 15 2021 }]
Code:-
var myArray = [
{ personName: 'Veronica', age:24 , dateOfSubmission: 'Nov 24 2021'},
{ personName: 'Eva', age:17, dateOfSubmission: 'Oct 31 2021'},
{ personName: 'Paul', age:35, dateOfSubmission: 'Nov 15 2021' }
];
//write your own comparison function
//pass two objects to compare
function compare( obj1, obj2 )
{
// compare objects based on age property
return obj1.age - obj2.age;
}
// print the sorted array
console.log(myArray.sort(compare));
Output:-
[
{ personName: 'Eva', age: 17, dateOfSubmission: 'Oct 31 2021' },
{ personName: 'Veronica', age: 24, dateOfSubmission: 'Nov 24 2021' },
{ personName: 'Paul', age: 35, dateOfSubmission: 'Nov 15 2021' }
]
The objects within the array are now sorted based on age.
Sort an Array of Objects with Date Property Value
Example:-
Sort the below array of objects based on the dateOfSubmission property
[ { personName: ‘Veronica’, age:24 , dateOfSubmission: ‘Nov 24 2021’}, { personName: ‘Eva’, age:17, dateOfSubmission: ‘Oct 31 2021’}, { personName: ‘Paul’, age:35, dateOfSubmission: ‘Nov 15 2021 }]
Code:-
var myArray = [
{ personName: 'Veronica', age:24 , dateOfSubmission: 'Nov 24 2021'},
{ personName: 'Eva', age:17, dateOfSubmission: 'Oct 31 2021'},
{ personName: 'Paul', age:35, dateOfSubmission: 'Nov 15 2021' }
];
//write your own comparison function
function compare( obj1, obj2 )
{
//Converting the strings to Date and then subtract to see if we positive,
// negative or zero.
return new Date(obj1.dateOfSubmission) - new Date(obj2.dateOfSubmission);
}
// print the sorted array
console.log(myArray.sort(compare));
Output:-
[
{ personName: 'Eva', age: 17, dateOfSubmission: 'Oct 31 2021' },
{ personName: 'Paul', age: 35, dateOfSubmission: 'Nov 15 2021' },
{ personName: 'Veronica', age: 24, dateOfSubmission: 'Nov 24 2021' }
]
The objects within the array are now sorted based on the dateOfSubmission.
Read More:
I hope this article helped you sort an array of objects by their property values in javascript. Good Luck !!!