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
– Nope, Commented May 3, 2018 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
– marekful, Commented May 3, 2018 at 12:47
You date format is wrong, check this answer stackoverflow.com/questions/3859239/sort-json-by-date — Ashish Kadam
– Ashish Kadam, Commented May 3, 2018 at 12:54

Scoots · Accepted Answer · 2018-05-03 12:50:29Z

2

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('-'));
});

answered May 3, 2018 at 12:50

Scoots

3,1142 gold badges25 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nope · Accepted Answer · 2018-05-03 12:53:04Z

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);

Eddie · Accepted Answer · 2018-05-03 12:56:57Z

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()

Yuniku_123 · Accepted Answer · 2018-05-03 12:53:23Z

0

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! :)

answered May 3, 2018 at 12:53

Yuniku_123

2791 gold badge7 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related