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 a String, a boolean, the number for primitive values, and an 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 initialized in an application

#Declare JSON object as any type in 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 an Array of Objects with type any, and assign an array of JSON objects using Casting in 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 {
  JSON object: 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. The disadvantage of this approach is that 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 with the same structure as JSON data. Let’s declare an interface in Angular.

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

In the Angular component,

Declare a variable of 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 a new type JsonObjectType.

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

JsonObjectType allows storing plain, nested, and array in JSON object.

Below, Create a variable of the JsonObjectType type and assign it to 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 create and initialize an JSON object in Angular components.