How to convert/parse json to/from  object in angular with examples| parse json in javascript,typescript  


Angular is the front end MVC framework, It communicates with the server via JSON format.

There are cases you need to send/consume the JSON object from angular application to REST API. Angular uses a typescript object which is a superset of javascript, which always needs to convert to/from object to JSON.

This work will cover you different ways to convert JSON to Object or object to json in angular.

This is also a popular interview question asked in angular/typescript based jobs.

How to Convert/parse JSON to/from a javascript object in Angular application.

In Applications, REST API is consumed in Angular applications using HTTP library, The data comes in the format of JSON,  How do you convert JSON to an object?

There are many ways we can parse JSON to/from a javascript object

JSON is an inbuilt object in javascript language

There are two methods in JSON objects

  • JSON.stringify() method string version of an object, which is the conversion of an object to JSON string
  • JSON.parse() - parse  string JSON object and creates javascript object
import { Component, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular";
  stringJson: any;
  stringObject: any;
  courseList = [
    {
      courseid: "1",
      coursename: "Java programming",
      author: "Franc"
    },
    {
      courseid: "2",
      coursename: "Learn Typescript programming",
      author: "John"
    }
  ];

  ngOnInit() {
    // Convert String obect to JSON
    this.stringJson = JSON.stringify(this.courseList);
    console.log("String json object :", this.stringJson);
    console.log("Type :", typeof this.stringJson);

    // ConvertjSON to an object
    this.stringObject = JSON.parse(this.stringJson);
    console.log("JSON object -", this.stringObject);
  }
}

Here is an html code for displaying the output in browser

<p>
Convert jsOn to/from Object Example</p>

<table>
      <tr *ngFor="let item of stringObject">
        <td>{{item.courseid}}</td>
        <td>{{item.coursename}}</td>
        <td>{{item.author}}</td>
      </tr>

</table>

The output you see in browser and console

Angular javascript json to object example

Angular json object parse example

Parse/mapping JSON object as Typescript object in angular

create a typescript interface  which declares all the fields of a JSON objects

Course interface is created for above json object.

export interface Course {
    couseid: string;
    coursename: string;
    author: string;
}

Next, the parse Course JSON object using JSON.parse() method, returns generic object of type any. Cast the generic object to an object of type course.

This will not work in javascript. As we are converting generic to interface using typing feature in typescript.

The advantage of this approach is to avoid runtime errors as most of the type checking happens at compile time only.

let jsonObject: any = JSON.parse(course);
let course: Course = <Course>jsonObj;

parse Javascript object as json using json pInputText

In angular components, if you want to display the javascript object as in JSON prettier printed format. JSON pipe is used.

JSON pipe is an angular inbuilt pipe

In the HTML template of components, provide the following line of code

{{stringObject | json }}

and output displayed is in the JSON format printed in the browser.

This helps the developer to print JSON objects during debugging for any issues.

Similar Posts