Angular 6 Sort Array of object by Date

javascript angular typescript sorting angular6

103,450

Solution 1

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.

Solution 2

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>

Solution 3

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

Solution 4

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.

Solution 5

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

View more solutions

103,450

Huy Le

Updated on July 08, 2021

Comments

Huy Le almost 3 years

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

Simon K over 5 years

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 5 years

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

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

What if date is null or empty ? @Tiisetso
user5155835 about 4 years

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