Angular Json Pipe Example

Angular Json Pipe Example

Angular Json Pipe Example

In Angular, We have a few built-in pipes. In this blog post, we’ll learn about JsonPipe in Angular.

Angular json pipe is also useful for debugging purpose because it displays all the properties of the object in pretty print json format.

Now, We’ll see the format of json pipe and an example of using JsonPipe with different options.

In Angular, Pipe is something that takes in data as input and transforms it into the desired output.

Format

<b><span style="color: #666666;">{{ value_expression | json }}</span></b><br />
value_expression:
It can be the value of any type that you need to convert into JSON format representation.

JSON PIPE

JsonPipe converts the value into JSON format representation and it is very useful for debugging purpose.

JsonPipe is an API provided by angular. It is part of angular CommonModule.
So we need to import CommonModule from @angular/common packages

<br />import { CommonModule } from '@angular/common';<br /><br />@NgModule({<br />    imports: [ CommonModule ]<br />    ...<br />    ...<br />})

Examples

Now we’ll see the following examples to understand the JsonPipe.
1) JsonPipe with Object.
2) JsonPipe with an Array of Objects.
3) JsonPipe with Array of Array.
4) JsonPipe with Object of Object.

1) JsonPipe with Object

Here we’ll take an example of a Customer object to display its JSON representation. 

Create a Customer Class

Create a Customer class in its own file in the src/app folder.

Give it id,firstName,lastName and email properties.

<br />export class Customer {<br />  id: number;<br />  firstName: string;<br />  lastName: string;<br />  email:string;<br />}<br /><br />

Now we’ll create one component called customer.component.ts and will create a customer object there.

<br />import { Component, OnInit } from '@angular/core';<br />import { Customer } from '../customer';<br /><br />@Component({<br />  selector: 'app-customer',<br />  templateUrl: './cutsomer.component.html',<br />  styleUrls: ['./customer.component.css']<br />})<br />export class CustomerComponent implements OnInit {<br />  customer: Customer = {<br />    id: 1,<br />    firstName: 'Elite',<br />    lastName: 'Corner',<br />    email: 'a@a.com'<br />  };<br /><br />  constructor() { }<br /><br />  ngOnInit() {<br />  }<br /><br />}<br /><br />

The template file customer.component.html will look as follows:

&lt;div&gt;<br />   &lt;pre&gt;<br />    {{customer|json}}<br />   &lt;/pre&gt;<br />&lt;/div&gt;<br />

Here in the above template, you can see that we’ve used &lt;pre&gt; tag, that will help us to get JSON string as pretty print.

Output

{
"id": 1,
"firstName": "Elite",
"lastName": "Corner",
"email": "a@a.com"
}

2) JsonPipe with an Array of Objects

Here, we’ll reuse the same Customer class that we have created in earlier example; JSON representation. 

Now we’ll create one component called customers.component.ts and will create an array of customer object there.

<br />import { Component, OnInit } from '@angular/core';<br />import { Customer } from '../customer';<br /><br />@Component({<br />  selector: 'app-customers',<br />  templateUrl: './cutsomers.component.html',<br />  styleUrls: ['./customers.component.css']<br />})<br />export class CustomersComponent implements OnInit {<br />  customers: Array<customer> = [{<br />    id: 1,<br />    firstName: 'Elite',<br />    lastName:'Corner',<br />    email:'a@a.com'<br />  },<br />  {<br />    id: 2,<br />    firstName: 'Json',<br />    lastName:'Pipe',<br />    email:'a@a.com'<br />  },<br />  {<br />    id: 3,<br />    firstName: 'Angular',<br />    lastName:'Material',<br />    email:'a@a.com'<br />  }];<br /><br />  constructor() { }<br /><br />  ngOnInit() {<br />  }<br /><br />}<br /><br /></customer>

The template file customer.component.html will look as follows:

&lt;div&gt;<br />   &lt;pre&gt;<br />    {{customers|json}}<br />   &lt;/pre&gt;<br />&lt;/div&gt;<br />

Output

[
{
"id": 1,
"firstName": "Elite",
"lastName": "Corner",
"email": "a@a.com"
},
{
"id": 2,
"firstName": "Json",
"lastName": "Pipe",
"email": "a@a.com"
},
{
"id": 3,
"firstName": "Angular",
"lastName": "Material",
"email": "a@a.com"
}
]

3) JsonPipe with an Array of Array

Here, we’ll update the Customer class and will add a new property called addresses in the
Customer class as below

customer.ts

<br />export class Customer {<br />  id: number;<br />  firstName: string;<br />  lastName: string;<br />  email:string;<br />  addresses:Address[]<br />}<br /><br />export class Address{<br />  id:number;<br />  streetAddress:string;<br />  zip:string;<br />  city:string<br />}<br /><br />

customers.component.ts

<br />import { Component, OnInit } from '@angular/core';<br />import { Customer } from '../customer';<br /><br />@Component({<br />  selector: 'app-customers',<br />  templateUrl: './cutsomers.component.html',<br />  styleUrls: ['./customers.component.css']<br />})<br />export class CustomersComponent implements OnInit {<br />  customers: Array<customer> = [{<br />    id: 1,<br />    firstName: 'Elite',<br />    lastName:'Corner',<br />    email:'a@a.com',<br />    addresses:[<br />      {<br />        id:1,<br />        city:'Banglore',<br />        streetAddress:'Akshya Nagar 1st Block',<br />        zip:'123'<br />      }<br />    ]<br />  }];<br />  constructor() { }<br /><br />  ngOnInit() {<br />  }<br /><br />}<br /><br /></customer>

The template file customer.component.html will look as follows:

&lt;div&gt;<br />   &lt;pre&gt;<br />    {{customers|json}}<br />   &lt;/pre&gt;<br />&lt;/div&gt;<br />

Output

[
{
"id": 1,
"firstName": "Elite",
"lastName": "Corner",
"email": "a@a.com",
"addresses": [
{
"id": 1,
"city": "Banglore",
"streetAddress": "Akshya Nagar 1st Block",
"zip": "123"
}
]
}
]

4) JsonPipe with Object of Object

Here, we’ll update the Customer class and will update the property addresses to address in the Customer class as below

customer.ts

<br />export class Customer {<br />  id: number;<br />  firstName: string;<br />  lastName: string;<br />  email:string;<br />  address:Address,<br />  <br />}<br /><br />export class Address{<br />  id:number;<br />  streetAddress:string;<br />  zip:string;<br />  city:string<br />}<br /><br />

customers.component.ts

<br />import { Component, OnInit } from '@angular/core';<br />import { Customer } from '../customer';<br /><br />@Component({<br />  selector: 'app-customers',<br />  templateUrl: './cutsomers.component.html',<br />  styleUrls: ['./customers.component.css']<br />})<br />export class CustomersComponent implements OnInit {<br />  customers: Array<customer> = [{<br />    id: 1,<br />    firstName: 'Elite',<br />    lastName:'Corner',<br />    email:'a@a.com',<br />    address:{<br />        id:1,<br />        city:'Banglore',<br />        streetAddress:'Akshya Nagar 1st Block',<br />        zip:'123'<br />      }<br />  }];<br />  constructor() { }<br /><br />  ngOnInit() {<br />  }<br /><br />}<br /><br /></customer>

The template file customer.component.html will look as follows:

&lt;div&gt;<br />   &lt;pre&gt;<br />    {{customers|json}}<br />   &lt;/pre&gt;<br />&lt;/div&gt;<br />

Output

[
{
"id": 1,
"firstName": "Elite",
"lastName": "Corner",
"email": "a@a.com",
"address": {
"id": 1,
"city": "Banglore",
"streetAddress": "Akshya Nagar 1st Block",
"zip": "123"
}
}
]

Now if you want to display JSON representation for an inner property(i.e address) of customer object, you can do it as follows:

&lt;div&gt;<br />   &lt;pre&gt;<br />    {{customers[0].address|json}}<br />   &lt;/pre&gt;<br />&lt;/div&gt;<br />

Common Errors while using Json Pipe with Angular Reactive Forms

TypeError: Converting circular structure to JSON



Also, read:

If you like this post, please share it with your friends.
Thanks.

Leave a Comment