How to sort array of objects based on date in Angular4?

Question

I have an array of objects as shown below :

this.filteredData = [
    {'id': 1, 'date': '04-05-2018'},
    {'id': 2, 'date': '29-03-2018'},
    {'id': 3, 'date': '03-04-2018'},
    {'id': 4, 'date': '24-07-2018'},
    {'id': 5, 'date': '19-08-2018'},
    {'id': 6, 'date': '13-09-2018'},
]

and am trying to sort the array based on the date on click of the button

    this.filteredData.sort(function(a, b){
      return new Date(b.date) - new Date(a.date);
    });

but the array is not sorting..

Where am i doing wrong? need help

Your dates are not valid. `29-03-2018` will be attempted to make a date for `03-29-2018`. - Do a `console.log(new Date(b.date))` do see what I mean in the console. — Nope, May 03 '18 at 12:46
Check what you are doing. Dump out the Date instances. Are they right? Date constructor only recognises a few formats. Use Date.parese(). — marekful, May 03 '18 at 12:47
You date format is wrong, check this answer https://stackoverflow.com/questions/3859239/sort-json-by-date — Ashish Kadam, May 03 '18 at 12:54

score 2 · Answer 1 · answered May 03 '18 at 12:50

Your date formats are invalid - 03-04-2018 is ambiguous - is that the third of April or the fourth of March?

Assuming you can't easily alter the source data, you can flip it inside your sort function into a ISO 8601 syntax:

this.filteredData.sort(function(a, b){
    return new Date(b.date.split('-').reverse().join('-')) - new Date(a.date.split('-').reverse().join('-'));
});

Eddie · Answer 2 · 2018-05-03T12:56:57.407

One option is to use year, month and day as separate parameters on new Date()

new Date(year, month [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

let filteredData = [
    {'id': 1, 'date': '04-05-2018'},
    {'id': 2, 'date': '29-03-2018'},
    {'id': 3, 'date': '03-04-2018'},
    {'id': 4, 'date': '24-07-2018'},
    {'id': 5, 'date': '19-08-2018'},
    {'id': 6, 'date': '13-09-2018'},
];


filteredData.sort((a, b) => {
  let formatDate = (dt) => {
    let [d, m, y] = dt.split('-');   //Split the array
    return [y, m - 1, d];            //Return on the as year, month and day order. Not m - 1 because js accepts 0-11 month. 
  }

  return new Date(...formatDate(b.date)).getTime() - new Date(...formatDate(a.date)).getTime();
});

console.log(filteredData);

Doc: new Date()

score 1 · Accepted Answer · answered May 03 '18 at 12:53

When creating a new Date it assumes the order of month then day, hence your dates such as 29-03-2018 will be seen as 03-29-2018 and cause invalid Date.

You can simply specify the date in reverse as 2018-03-29 that way it will see it correctly.

Using the string split method you can split the date value by - resulting in an array ["29","03","2018"]

Then reverse the array using array reverse resulting in ["2018","03","29"]

Finally, join the elements back into a single string using array join with -, resulting in "2018-03-29"

var filteredData = [
    {'id': 1, 'date': '04-05-2018'},
    {'id': 2, 'date': '29-03-2018'},
    {'id': 3, 'date': '03-04-2018'},
    {'id': 4, 'date': '24-07-2018'},
    {'id': 5, 'date': '19-08-2018'},
    {'id': 6, 'date': '13-09-2018'}
]

filteredData.sort(function(a, b){
      return new Date(b.date.split('-').reverse().join('-')) - new Date(a.date.split('-').reverse().join('-'));
});

console.log(filteredData);

score 0 · Answer 4 · answered May 03 '18 at 12:53

If you try to write this in console:

new Date("29-03-2018")

You will get invalid date: Invalid Date

This:

new Date("04-05-2018")

Thu Apr 05 2018 00:00:00 GMT+0200 (Central European Daylight Time)

will get you wrong month (you get April instead May). But, if you write date like:

new Date("03-29-2018")

Thu Mar 29 2018 00:00:00 GMT+0200 (Central European Daylight Time)

you will get the correct date. So,replace month and day in order to work! :)

How to sort array of objects based on date in Angular4?

4 Answers4