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.

We'll see an example of using JsonPipe with different options.

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


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.

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 Customer object to display it's Json representation. 


Create 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 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:
<div>
   <pre>
    {{customer|json}}
   </pre>
</div>

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: Array = [{
    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:
<div>
   <pre>
    {{customers|json}}
   </pre>
</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"
  }
]



3) JsonPipe with an Array of Array


Here, we'll update the Customer class and will add 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: Array = [{
    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:
<div>
   <pre>
    {{customers|json}}
   </pre>
</div>

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

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:
<div>
   <pre>
    {{customers|json}}
   </pre>
</div>

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 inner property(i.e address) of customer object, you can do it as follows:
<div>
   <pre>
    {{customers[0].address|json}}
   </pre>
</div>


Also, read:


If you like this post, please share it with your friends.
Thanks.
Angular Json Pipe Example Angular Json Pipe Example Reviewed by Borad Akash on November 04, 2018 Rating: 5

No comments:

Powered by Blogger.