To sort an Object Array by Date in JavaScript, we have different approaches. We are going to learn how to sort an Object Array by Date in JavaScript.
Below are the approaches to sort an Object Array by Date in JavaScript:
Table of Content
Approach 1: Using sort
method with Date
objects
This approach uses the built-in sort
method along with Date
objects. The sort
method compares Date
objects directly, sorting the array in ascending order based on the date property.
Example: In this example, we are using the sort method with Date objects.
const data = [ { name: 'Event 1' , date: new Date( '2023-01-15' ) },
{ name: 'Event 2' , date: new Date( '2022-12-20' ) },
{ name: 'Event 3' , date: new Date( '2023-03-05' ) }
]; // Sorting the array based on the 'date' property data.sort((a, b) => a.date - b.date); console.log(data); |
[ { name: 'Event 2', date: 2022-12-20T00:00:00.000Z }, { name: 'Event 1', date: 2023-01-15T00:00:00.000Z }, { name: 'Event 3', date: 2023-03-05T00:00:00.000Z } ]
Approach 2: Using sort()
method with getTime()
method
Similar to the first approach, this method uses the sort
method but employs the getTime
method on Date
objects to obtain their numeric representations. Sorting is done based on these numeric values.
Example: In this example, we are using sort
method with getTime
method.
const data = [ { name: 'Event 1' , date: new Date( '2023-01-15' ) },
{ name: 'Event 2' , date: new Date( '2022-12-20' ) },
{ name: 'Event 3' , date: new Date( '2023-03-05' ) }
]; // Sorting the array based on the 'date' property data.sort((a, b) => a.date.getTime() - b.date.getTime()); console.log(data); |
[ { name: 'Event 2', date: 2022-12-20T00:00:00.000Z }, { name: 'Event 1', date: 2023-01-15T00:00:00.000Z }, { name: 'Event 3', date: 2023-03-05T00:00:00.000Z } ]
Approach 3: Using a custom sorting function
In this approach, a custom sorting function (sortByDate
) is defined, which compares the date
properties of the objects. This function is then used as an argument for the sort
method to achieve the desired sorting.
Example: In this example, we are Using a custom sorting function
const data = [ { name: 'Event 1' , date: new Date( '2023-01-15' ) },
{ name: 'Event 2' , date: new Date( '2022-12-20' ) },
{ name: 'Event 3' , date: new Date( '2023-03-05' ) }
]; // Custom sorting function const sortByDate = (a, b) => { return a.date - b.date;
}; // Sorting the array based on the 'date' property using the custom function data.sort(sortByDate); console.log(data); |
[ { name: 'Event 2', date: 2022-12-20T00:00:00.000Z }, { name: 'Event 1', date: 2023-01-15T00:00:00.000Z }, { name: 'Event 3', date: 2023-03-05T00:00:00.000Z } ]
Approach 4: Using Lodash _.orderBy() Method
Lodash _.orderBy() method is similar to the _.sortBy() method except that it allows the sort orders of the iterates to sort by. If orders are unspecified, then all values are sorted in ascending order otherwise order of corresponding values specifies an order of “desc” for descending or “asc” for ascending sort.
Syntax:
_.orderBy(Collection, [ iteratees ], [ orders ]);
Example: In this example, we are sorting the array’s patron in ascending order and age in descending order.
// Requiring the lodash library const _ = require( "lodash" );
// Original array let users = [ { 'patron' : 'jonny' , 'age' : 48 },
{ 'patron' : 'john' , 'age' : 34 },
{ 'patron' : 'john' , 'age' : 40 },
{ 'patron' : 'jonny' , 'age' : 36 }
]; // Use of _.orderBy() method // Sort by `patron` in ascending order // and by `age` in descending order let sorted_array = _.orderBy(users, [ 'patron' , 'age' ],
[ 'asc' , 'desc' ]);
// Printing the output console.log(sorted_array); |
Output:
[
{ 'patron': 'john', 'age': 40 },
{ 'patron': 'john', 'age': 34 },
{ 'patron': 'jonny', 'age': 48 },
{ 'patron': 'jonny', 'age': 36 }
]