Angular 6 Sort Array of object by Date

Question

I try to sort the array object by date for my Angular 6 application. The data has string format. I wonder if there is an existing module to perform sort in Angular or we have to build sort function it in Typescript.

Angular Template

<app-item *ngFor="let item of someArray"></app-item>

The Array

[
  {
    CREATE_TS: "2018-08-15 17:17:30.0",
    Key1: "Val1",
    Key2: "Val2",
  },
  {
    CREATE_TS: "2018-08-15 17:25:30.0",
    Key1: "Val1",
    Key2: "Val2",
  },
  {
    CREATE_TS: "2018-08-15 17:28:30.0",
    Key1: "Val1",
    Key2: "Val2",
  }
]

Pruthvi Raj · Accepted Answer · 2019-06-16 03:09:25Z

37

For recent first:

this.data.sort((a, b) => new Date(b.date1).getTime() - new Date(a.date1).getTime());

For OlderFirst:

this.data.sort((b, a) => new Date(b.date1).getTime() - new Date(a.date1).getTime());

answered Jun 16, 2019 at 3:09

Pruthvi Raj

4132 gold badges6 silver badges10 bronze badges

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

2 Comments

user5155835 Over a year ago

In both cases, it should be this.data.sort((a, b)

Alejo Florez Over a year ago

In Angular 16, this still works

Krishna Rathore · Accepted Answer · 2018-08-16 06:39:59Z

33

You can use Array.sort for sort data.

I have created a demo on Stackblitz. I hope this will help/guide to you/others.

component.ts

  data = [
    {
      CREATE_TS: "2018-08-15 17:17:30.0",
      Key1: "Val1",
      Key2: "Val2",
    },
    {
      CREATE_TS: "2018-08-15 17:25:30.0",
      Key1: "Val1",
      Key2: "Val2",
    },
    {
      CREATE_TS: "2018-08-15 17:28:30.0",
      Key1: "Val1",
      Key2: "Val2",
    }
  ]

  get sortData() {
    return this.data.sort((a, b) => {
      return <any>new Date(b.CREATE_TS) - <any>new Date(a.CREATE_TS);
    });
  }

component.html

<div *ngFor="let item of sortData">
  {{item.Key1}} -- {{item.CREATE_TS}} 
</div>

answered Aug 16, 2018 at 6:39

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

Comments

Tiisetso Tjabane · Accepted Answer · 2018-08-15 23:03:49Z

19

you can use the sort function for arrays, it takes in compare function. Parse the Date string into a date object and sort by it.

4 Comments

Simon K Over a year ago

Given the format that the timestamps are in, you don't actually need to convert them into a Date object. A simple string comparison (val1.CREATE_TS > val2.CREATE_TS) would suffice.

Huy Le Over a year ago

@SimonK It compiled with an error because, in the sort comparison, it can not return a boolean.

Simon K Over a year ago

Right, I forgot it was supposed to be a number. Go with val1.CREATE_TS > val2.CREATE_TS ? 1 : -1

Unknown_Coder Over a year ago

What if date is null or empty ? @Tiisetso

derelict · Accepted Answer · 2018-08-15 23:21:06Z

16

in addition to cryptic's answer, you will likely want to wrap the sorted values in an accessor for including in the template, adding a getter in your typescript class:

public get sortedArray(): YourItemType[] {
    return this.myArr.sort(...);
}

and in the template:

<app-item *ngFor="let item of sortedArray"></app-item>

alternately, you can sort the array as you get it into your component class and store the sorted version there, however the accessor pattern can be quite useful for dynamic sorting.

answered Aug 15, 2018 at 23:21

derelict

2,08012 silver badges15 bronze badges

Comments

Sarjerao Ghadage · Accepted Answer · 2019-02-28 09:48:49Z

10

Using this method in Typescript, you can easily sort date values in whatever order you’d like. You can also sort any type of other data types, like number or string, by simply removing the new Date() and getTime methods.

this.data.sort((a, b) => new Date(b.CREATE_TS).getTime() - new Date(a.CREATE_TS).getTime());

answered Feb 28, 2019 at 9:48

Sarjerao Ghadage

1,55616 silver badges38 bronze badges

Comments

Ben Steward · Accepted Answer · 2018-08-15 23:49:32Z

5

From looking through the docs, there doesn't seem to be any built-in array sorting. However, you can do this in your template:

<app-item *ngFor="let item of someArray.sort(sortFunc)"></app-item>

And then in your component.ts file, define the function, because you cannot define functions in your template:

sortFunc (a, b) {
  return a.CREATE_TS - b.CREATE_TS
}

Edit: Simon K pointed out that the string format allows for straight comparison without coercing to Date and then to number. My original equation (for scenarios where your date string isn't that convenient):

return new Date(a.CREATE_TS).getTime() - new Date(b.CREATE_TS).getTime()

edited Aug 15, 2018 at 23:49

answered Aug 15, 2018 at 22:43

Ben Steward

2,4171 gold badge15 silver badges26 bronze badges

Comments

Lucian Popa · Accepted Answer · 2020-04-01 16:33:26Z

4

You should first parse the dates to miliseconds, then perform sorting, in order to avoid the "the left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type" typescript error when you return new Date(a.CREATE_TS) - new Date(b.CREATE_TS):

someArray.sort((a: any, b: any) => { return Date.parse(a.CREATE_TS) - Date.parse(b.CREATE_TS) });

edited Apr 1, 2020 at 16:33

answered Apr 1, 2020 at 16:24

Lucian Popa

1111 silver badge4 bronze badges

Comments

Suraj Parise · Accepted Answer · 2020-08-04 18:18:38Z

3

With moment.js you can use

const newArr = myArr.sort((a, b) => moment(b.date).unix() - moment(a.date).unix());

answered Aug 4, 2020 at 18:18

Suraj Parise

3303 silver badges18 bronze badges

Comments

Jordy van den Aardweg · Accepted Answer · 2022-11-14 09:00:06Z

1

For those who a researching on how to do this. I created a small type-safe array sorting method with support for deeply nested properties and Typescript autocompletion.

https://github.com/jvandenaardweg/sort-by-property

https://www.npmjs.com/package/sort-by-property

Example:

arr.sort(sortByProperty('CREATE_TS', 'asc'));

answered Nov 14, 2022 at 9:00

Jordy van den Aardweg

4746 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular 6 Sort Array of object by Date

9 Answers 9

2 Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related