In this tutorial we will show you the solution of how to create json object in angular 6, here we created and initialized our array of json object is any type in the angular component.

The OnInit implemented to the existed class then because it is a callback method that is invoked immediately after the default change detector has checked the directive’s data-bound properties for the first time. It is invoked only once when the directive is instantiated.

Step By Step Guide On How To Create Json Object In Angular 6 :-

We imported OnInit because it is invoked immediately. We implements OnInit to our existed class then we initialized our json array object with any type.

Json array contain information of ‘id,name,lastmodified datetime string’ then we defined contructor for convert array object to json object and displayed on console.

We initialized and declared json array with ‘any’ type so we needs to convert to json type it’s defined in constructor.

Src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'NewProgram';
  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'}
  ]
  constructor(){
    this.jsonObject=<JSON>this.arrayObj;
    console.log(this.jsonObject);
  } ngOnInit(): void { } }

1. As we know in angular component source had separated file in those we are not touch other files except ‘app.component.ts’. Because this is the main building block for angular application and always typescript class that defines behavior.
2. No need to do any changes on html and module.ts files because we just declared our json object.
3. In app.component.ts file as we know which is implements OnInit by using this we can execute the json declaration immediately. We initialized our json array with three sets of array values ‘id,name,lastmodified’.
4. Json array object type sets to ‘any’ so it can accept all types of values and it’s type also sets when we initializing json array. We created one object ‘jsonObject’ and its type sets to ‘JSON’ for store converted json object.
5. We defined constructor within that we converted our arrayobject to json type and stored to variable ‘jsonObject’.
6. For verification we printed our json object result at console by console.log() method. As we know when we implements OnInit it method of ‘ngOnInit()’ method also declared.
7. We can change our user defined array values and also we can declare json object by using interface in angular or using typescript also.

Conclusion :-

In conclusion now we are able to know how to create json object using angular.

For seeing result on webpage we need supports of server and internet connection. As we know commend ‘ng serve’ will execute our code on server port ‘localhost:4200’.

Initially our result on webpage is empty because we seen declarations only and we printed result on console.

For seeing console result we need to right click on webpage and select ‘inspect’ last option then browsers left side one panel will open.

I hope this tutorial on how to create json object in angular 6 helps you and the steps and method mentioned above are easy to follow and implement.