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.