How to Sort Array JSON objects with date field in Angular | Typescript example

How to Sort Array JSON objects with date field in Angular | Typescript example

In this short tutorial, How to sort array json dates wit

  • How do you create a Date object in Angular
  • How to compare two dates in Angular
  • Compare two dates without time in Angular

Let’s create an array of JSOn objects with one of the key-value being date in the string.

arrayJson: any = [
  {
    id: 1,
    name: "john",
    lastModified: "2011-01-01 02:00:00",
  },
  {
    id: 2,
    name: "Franc",
    lastModified: "2001-01-01 02:00:00",
  },
  {
    id: 3,
    name: "Andrew",
    lastModified: "2021-01-01 02:00:00",
  },
  {
    id: 11,
    name: "Mark",
    lastModified: "2020-01-01 02:00:00",
  },
  {
    id: 12,
    name: "Eric",
    lastModified: "2020-02-01 02:00:00",
  },
  {
    id: 8,
    name: "Tony",
    lastModified: "1990-01-01 02:00:00",
  },
];

How to Sort an Array of JSON objects with a date key in Angular?

Let’s create an angular application and create a new component array-json-dates.component.

Array Sort method sort the arrays in ascending or descending order.

Angular typescript component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-array-json-dates',
  templateUrl: './array-json-dates.component.html',
  styleUrls: ['./array-json-dates.component.scss']
})
export class ArrayJsonDatesComponent implements OnInit {
  arrayJson: any = [
    {
      id: 1,
      name: "john",
      lastModified: '2011-01-01 02:00:00'
    },
    {
      id: 2,
      name: "Franc",
      lastModified: '2001-01-01 02:00:00'
    },
    {
      id: 3,
      name: "Andrew",
      lastModified: '2021-01-01 02:00:00'
    },
    {
      id: 11,
      name: "Mark",
      lastModified: '2020-01-01 02:00:00'
    },
    {
      id: 12,
      name: "Eric",
      lastModified: '2020-02-01 02:00:00'
    },
    {
      id: 8,
      name: "Tony",
      lastModified: '1990-01-01 02:00:00'
    }
  ]
  constructor() { }

  ngOnInit(): void {

  }
  get sortByLastModifiedDesc() {
    return this.arrayJson.sort((a: any, b: any) => {
      return <any>new Date(b.lastModified) - <any>new Date(a.lastModified);
    });
  }
  get sortByLastModifiedAsend() {
    return this.arrayJson.sort((a: any, b: any) => {
      return <any>new Date(b.lastModified) - <any>new Date(a.lastModified);
    });
  }
}

Here is html component.

<p>Sort Array of JSOn objects with date string key</p>
<ul>
  <li *ngFor="let obj of sortByLastModifiedDesc">{{obj.lastModified}}</li>
</ul>

How to sort an array of objects with a timestamp in Angular

In Angular, any object can be compared using the relational operator (===) In the same way, we can use the === operator to compare objects.

Angular typescript component:

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-datecompare",
  templateUrl: "./datecompare.component.html",
  styleUrls: ["./datecompare.component.css"],
})
export class DatecompareComponent implements OnInit {
  date1: Date = new Date();
  date2: Date = new Date();
  constructor() {}

  ngOnInit(): void {}
  isDateEqual() {
    if (this.date1.getTime() === this.date2.getTime()) return true;
    return false;
  }
}

In Typescript, We have written function isDateEqual() which checks for date comparison.

First, create a Date object in Angular using a new Date object for the current date. Directly Date object can not be compared, Instead, we have to use the Date.getTime function and === operator.

Template component

<p>Date object Comparision</p>
{{isDateEqual()}} // true

We can also use other relational operators.

How to compare the given Date with the current Date in Angular

Suppose the Date object is coming from Database, You want to compare it with the current date.

Below is an angular example to compare the given date before or after of current date.

We can use <,> !==,<=,>= relational operators for comparing dates.

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-datecompare",
  templateUrl: "./datecompare.component.html",
  styleUrls: ["./datecompare.component.css"],
})
export class DateComponent implements OnInit {
  date1: Date = new Date("01.01.2020");
  currentDate: Date = new Date();

  constructor() {}

  ngOnInit(): void {}

  compareDates() {
    if (this.date1.getTime() < this.currentDate.getTime()) {
      console.log("date1 is before current date");
    }
    if (this.date1.getTime() > this.currentDate.getTime()) {
      console.log("date1 is after current date");
    }
  }
}

How to compare future Date with current Date in a template component

Sometimes, We want to compare the Current date with future dates,

Here is an angular component to compare future dates with the given date.

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-datecompare",
  templateUrl: "./datecompare.component.html",
  styleUrls: ["./datecompare.component.css"],
})
export class DateComponent implements OnInit {
  futureDate: Date = new Date("01.01.2022");
  currentDate: Date = new Date();

  constructor() {}

  ngOnInit(): void {}

  checkFutureDate() {
    if (this.futureDate.getTime() > this.currentDate.getTime()) {
      console.log("date1 is before current date");
      return true;
    }
  }
}

In Template component using *ngIf directive, We can use the function to check truthy values

<div *ngIf="checkFutureDate()">Future Date passed</div>

And it throws error TS7006: Parameter ‘a’ implicitly has an ‘any’ type.

   get sortByLastModified() {
    return this.arrayJson.sort((a, b) => {
      return <any>new Date(b.lastModified) - <any>new Date(a.lastModified);
    });
  }

Conclusion

Learn different examples for comparing two dates that are equal and comparing future and given dates with current dates.