How To Parse And Stringify JSON Data Using Angular

It is the quick solution to the normal question - how to parse JSON data coming from API and how to send JSON data from an Angular service.

Introduction

 

A few days ago, someone asked me how to parse JSON data coming from API requests using Angular applications. So, I thought of writing a solution for those who want a simple solution without crawling through many links on Google.

 

Thus, this is the simple solution and can be applied for any language that gets a JSON data from the API. I believe most of the APIs now return JSON data rather than any other format like XML.

 

Let's see two basic examples:

• How to send/stringify JSON data
• How to parse JSON data 

How to send JSON data

 

Sometimes, we have a situation, in which we should send the data to the service of JSON format. For that, we can create a dummy data to test the API and can send it to the service by converting into JSON format like in the given example.

 

For that, we can use a method JSON.stringify(), which is used to convert the object data into the JSON format.

 

Example

import { Component , OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
})
export class AppComponent implements OnInit {

  stringifiedData: any;

  // Object Data
  myData = {
    name: "Manav",
    qualification: "M.C.A",
    technology: "Angular"
  };

  ngOnInit() {

    // Object data
    console.log(this.myData);

    // Convert to JSON
    this.stringifiedData = JSON.stringify(this.myData);
    console.log("With Stringify :" , this.stringifiedData);

  }
}

We have created an object data using variable myData, where we have stored the data as an object, and we are going to convert it using JSON.stringify() method. When you run the above example, you can see the output like this.

 

 

How to parse JSON data 

 

We have seen a simple example to convert data from an object to JSON. Now, if we have data into JSON format, then we need to convert it into object format. Here, one method will be useful, i.e., JSON.parse().

 

It takes the data in JSON format and converts it into JavaScript Object format. Just see the simple example below.

 

Example

import { Component , OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
})
export class AppComponent implements OnInit {

  stringifiedData: any;
  parsedJson: any;

  // Object Data
  myData = {
    name: "Manav",
    qualification: "M.C.A",
    technology: "Angular"
  };

  ngOnInit() {

    // Object data
    console.log(this.myData);

    // Convert to JSON
    this.stringifiedData = JSON.stringify(this.myData);
    console.log("With Stringify :" , this.stringifiedData);

     // Parse from JSON
    this.parsedJson = JSON.parse(this.stringifiedData);
    console.log("With Parsed JSON :" , this.parsedJson);

  }
}

In this example, we are going to parse the previously created JSON data into object format using JSON.parse() method. Let's see the output. 

 

 

This is how we have converted the object to parse and JSON to object data using two different and simple methods. You can use these methods also when you need to convert the data in two different formats.

 

Conclusion

 

This solution will be helpful to someone who wants to convert their data to JSON or from JSON format to object. Do let me know if you have any questions. Thanks for reading.