Hello Devs, 

In this tutorial, we will learn Angular Json Pipe Example | Json Pipe in Angular 9/8/7

Json pipe help to debug your object or object array because you can not print direct object in view file. so you can display it in json array see

Follow this step by step guide below. 

Syntax:

{{ value_expression | json }}



Json Pipe with Object:

import { Component } from '@angular/core';

  

@Component({

  selector: 'my-app',

  template: `<div>

    <p>{{ myObject }}</p>

    <p>{{ myObject | json }}</p>

  </div>`,

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  name = 'Angular';

  

  myObject = {

    id: 1,

    name: "Hardik"

  };

}


Output:

[object Object]

  

{ "id": 1, "name": "Hardik" }


Json Pipe with Object Array:

import { Component } from '@angular/core';

  

@Component({

  selector: 'my-app',

  template: `<div>

    <p>{{ myArrayObject }}</p>

    <p>{{ myArrayObject | json }}</p>

  </div>`,

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  name = 'Angular';

  

  myArrayObject = [

    {

      id: 1,

      name: "Hardik",

      roles: [1, 2, 3]

    },

    {

      id: 1,

      name: "Harsukh",

      roles: [1, 2, 4, 5]

    }

  ];

  

}


Output:

[object Object],[object Object]

  

[ { "id": 1, "name": "Hardik", "roles": [ 1, 2, 3 ] }, { "id": 1, "name": "Harsukh", "roles": [ 1, 2, 4, 5 ] } ]


May this example help you.