Post
Ask Question

How To Parse And Stringify JSON Data Using Angular

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
  1. import { Component , OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'my-app',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: [ './app.component.css' ],  
  7. })  
  8. export class AppComponent implements OnInit {  
  9.   
  10.   stringifiedData: any;  
  11.   
  12.   // Object Data  
  13.   myData = {  
  14.     name: "Manav",  
  15.     qualification: "M.C.A",  
  16.     technology: "Angular"  
  17.   };  
  18.   
  19.   ngOnInit() {  
  20.   
  21.     // Object data  
  22.     console.log(this.myData);  
  23.   
  24.     // Convert to JSON  
  25.     this.stringifiedData = JSON.stringify(this.myData);  
  26.     console.log("With Stringify :" , this.stringifiedData);  
  27.   
  28.   }  
  29. }  
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.
 
Parse And Stringify JSON Data Using Angular
 
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
  1. import { Component , OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'my-app',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: [ './app.component.css' ],  
  7. })  
  8. export class AppComponent implements OnInit {  
  9.   
  10.   stringifiedData: any;  
  11.   parsedJson: any;  
  12.   
  13.   // Object Data  
  14.   myData = {  
  15.     name: "Manav",  
  16.     qualification: "M.C.A",  
  17.     technology: "Angular"  
  18.   };  
  19.   
  20.   ngOnInit() {  
  21.   
  22.     // Object data  
  23.     console.log(this.myData);  
  24.   
  25.     // Convert to JSON  
  26.     this.stringifiedData = JSON.stringify(this.myData);  
  27.     console.log("With Stringify :" , this.stringifiedData);  
  28.   
  29.      // Parse from JSON  
  30.     this.parsedJson = JSON.parse(this.stringifiedData);  
  31.     console.log("With Parsed JSON :" , this.parsedJson);  
  32.       
  33.   }  
  34. }  
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. 
 
Parse And Stringify JSON Data Using Angular
 
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.