Sort an Object Array by Date in JavaScript

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:

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 }
]

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 }
]

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 }
]

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 }
]

Using Intl.DateTimeFormat and Array.prototype.sort()

To sort an object array by date using `Intl.DateTimeFormat` and `Array.prototype.sort()`, convert the date strings to formatted dates, then use the `sort` method with a custom compare function that compares the formatted dates.

Example: In this example we defines an array of objects with dates, sorts the array by the date property using Intl.DateTimeFormat.

const array = [
    { id: 1, date: '2022-01-15' },
    { id: 2, date: '2023-03-20' },
    { id: 3, date: '2021-09-10' }
];

array.sort((a, b) => new Intl.DateTimeFormat('en-US').format(new Date(a.date)) -
    new Intl.DateTimeFormat('en-US').format(new Date(b.date)));

console.log(array);

[
  { id: 1, date: '2022-01-15' },
  { id: 2, date: '2023-03-20' },
  { id: 3, date: '2021-09-10' }
]