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.
Table of Contents
Format
{{ value_expression | json }}
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
import { CommonModule } from '@angular/common';
@NgModule({
imports: [ CommonModule ]
...
...
})
Examples
Now we’ll see the following examples to understand the JsonPipe.
- Angular JsonPipe with Object.
- Angular JsonPipe with an Array of Objects.
- Angular JsonPipe with Array of Array.
- Angular JsonPipe with Object of Object.
- Angular Json Pipe with Reactive Form
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.
export class Customer {
id: number;
firstName: string;
lastName: string;
email: string;
}
Now we’ll create one component called customer.component.ts
and will create a customer object there.
import { Component, OnInit } from '@angular/core';
import { Customer } from '../customer';
Component({
selector: 'app-customer',
templateUrl: './cutsomer.component.html',
styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
customer: Customer = {
id: 1,
firstName: 'Elite',
lastName: 'Corner',
email: 'a@a.com'
};
constructor() { }
ngOnInit() { }
}
The template file customer.component.html
will look as follows:
{{customer | json}}
Here in the above template, you can see that we’ve used <pre>
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.
import { Component, OnInit } from '@angular/core';
import { Customer } from '../customer';
@Component({
selector: 'app-customers',
templateUrl: './cutsomers.component.html',
styleUrls: ['./customers.component.css']
})
export class CustomersComponent implements OnInit {
customers = [
{ 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' }];
constructor() { }
ngOnInit() { }
}
The template file customer.component.html
will look as follows:
{{customers | json}}
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
export class Customer {
id: number;
firstName: string;
lastName: string;
email: string;
addresses: Address[]
}
export class Address {
id: number;
streetAddress: string;
zip: string;
city: string
}
customers.component.ts
import { Component, OnInit } from '@angular/core';
import { Customer } from '../customer';
@Component({
selector: 'app-customers',
templateUrl: './cutsomers.component.html',
styleUrls: ['./customers.component.css']
})
export class CustomersComponent implements OnInit {
customers = [{
id: 1,
firstName: 'Elite',
lastName: 'Corner',
email: 'a@a.com',
addresses: [{
id: 1,
city: 'Banglore',
streetAddress: 'Akshya Nagar 1st Block',
zip: '123'
}]
}];
constructor() { }
ngOnInit() { }
}
The template file customer.component.html
will look as follows:
{{customers | json}}
Output
[
{
"id": 1,
"firstName": "Elite",
"lastName": "Corner",
"email": "a@a.com",
"addresses": [
{
"id": 1,
"city": "Banglore",
"streetAddress": "Akshya Nagar 1st Block",
"zip": "123"
}
]
}
]
We can also display each item one by one using json pipe as following.
To display each item, we’ll use ngFor directive as following
<div *ngfor="let customer of customers">
{{customer | json }} <br> <br>
</div>
Output
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
export class Customer {
id: number;
firstName: string;
lastName: string;
email: string;
address: Address
}
export class Address {
id: number;
streetAddress: string;
zip: string;
city: string
}
customers.component.ts
import { Component, OnInit } from '@angular/core';
import { Customer } from '../customer';
@Component({
selector: 'app-customers', templateUrl: './cutsomers.component.html',
styleUrls: ['./customers.component.css']
})
export class CustomersComponent implements OnInit {
customers: Array = [
{
id: 1,
firstName: 'Elite',
lastName: 'Corner',
email: 'a@a.com',
address: {
id: 1,
city: 'Banglore',
streetAddress:
'Akshya Nagar 1st Block',
zip: '123'
}
}];
constructor() { }
ngOnInit() { }
}
The template file customer.component.html
will look as follows:
{{customers|json}}
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:
{{customers[0].address|json}}
5. Angular JsonPipe with Reactive Form
Angular Json Pipe is useful while working with the reactive form. We can display the current values or realtime values of each property of the form in template or we can get the value of specific properties.
Now we’ll see how to use Angular Json Pipe to debug the form or display the value of the form.
app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
profileForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
});
}
Here we’ve created a new form profileForm
and added two properties called firstName
and lastName
.
and out template app.component.ts
file looks like
<form [formgroup]="profileForm">
<label>
First Name:
<input type="text" formcontrolname="firstName">
</label>
<br>
<label>
Last Name:
<input type="text" formcontrolname="lastName">
</label>
</form>
<br>
<br>
<b>Current Values:</b>{{profileForm.value | json}}
<br>
<br>
First Name value: {{profileForm.get('firstName').value | json}}
<br>
<br>
Last Name value: {{profileForm.get('lastName').value | json}}
Here we’ve displayed angular reactive form and also first name and last name using Angular Json PIpe
Output :

I hope you like this article. 🙂
Common Errors while using Json Pipe with Angular Reactive Forms
TypeError: Converting circular structure to JSONSolution: https://stackoverflow.com/questions/38906080/typeerror-converting-circular-structure-to-json-when-trying-to-post-request
Also, read:
- Angular Slice Pipe Example
- Angular Date Pipe Example
- Custom Validators in Angular
- Getting Started With Angular Reactive Forms
- Angular Reactive Forms With Built In Validators Example
- Match Password Validation in Angular Reactive Forms
- Get Started With Ionic4