How to declare JSON object in Angular | Typescript example

This tutorial explains multiple ways to declare and initialize the JSOn object data in Angular. It also includes an example in Typescript.

Sometimes, you want to declare a JSOn object in Angular, JSOn object can contain String, a boolean, the number for primitive values, and Array for nested objects.

There are multiple ways to declare a jSOn object.

Let’s see How an array of json objects can be created and initialize

How to declare any type json object with Angular?

Typescript is the typed language used to check type checks at compile time. So in Angular, Each variable must hold a type to specify the type of the type.

JSOn is normal data, So declare a variable for any type. any type in typescript enables to acceptance of any type of data.

In the below example, the Array of JSOn objects is created and initialized in the Angular component.

Declare a variable of JSOn object and cast an array of json objects to this variable in the constructor.

Here is a code for angular any type json variable create example.

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 {
  jsonObject: JSON;

  arrayObj: 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() {
    this.jsonObject = <JSON>this.arrayObj;

  }

  ngOnInit(): void {

  
}

This approach is simple and easy to declare and initialize the json object. Disadvantages with this approach are json data validation is not checked at compile type

How to declare JSON object using the interface in Angular

In this approach, Create an interface using the json format data Let’s declare an interface in Angular

interface Employee {
    id: number;
    name: string;
    salary: number
}

In the Angular component, Declare a variable of an Employee array and assign json object.

an example

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: Employee[] = [
    {
      id: 1,
      name: "john",
      salary: 5000
    },
    {
      id: 11,
      name: "eric",
      salary: 15000
    }

  ]
  empObject = {
    id: 8,
    name: "Tony",
    salary: 5000
  };
  constructor() {

  }

  ngOnInit(): void {

  }
  
}

how to Create and initialize a type for JSON Object in typescript

The type keyword allows the declaration and assigns new types in typescript. You can check more about [typescript type](/typescript-type-keyword/

JSON holds string keys and values can be strings, numbers, a boolean, and arrays

let’s declare new type JsonObjectType

type JsonObjectType =
    | string
    | number
    | boolean
    | { [x: string]: JsonObjectType }
    | Array<JsonObjectType>;

JsonObjectType allows storing plain, nested, and array in json object

Below, Created a variable of the JsonObjectType type and assign it with the JSOn object as seen below.

const jsonData: JsonObjectType= [
    {
      id: 1,
      name: "john",
      salary: 5000
    },
    {
      id: 11,
      name: "eric",
      salary: 15000
    }
  ]

The Type keyword works in Angular components.

Conclusion

In this tutorial, you learned different examples for comparing two dates that are equal and comparing future and given dates with the current date.