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.

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

{ “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” }

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 CRUD operation Example