Angular Pipe Json examples | pretty format code


This is an short tutorial about angular pipe json examples

  • How to print json object in Angular component

Angular has inbuilt pipe called jsonPipe from @angular/common module.

This will be useful to convert an typescript object into JSON format type.

This will be useful to debug and manipulate object data.

Here is syntax in html template

{{object|json}}

How do you print an object without json pipe in Angular?

Let’s declare an Employee.ts object in typescript angular application.

export class Employee {
  id: Number;
  name: string;
  salary: Number;
}

Let’s create an angular typescript component. Create and Initialize array of employee with data.

import { Component } from '@angular/core';
import { Employee } from './employee';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  employees: Employee[] = [
    { id: 1, name: 'Ram', salary: 5000 },
    { id: 2, name: 'John', salary: 1000 },
    { id: 3, name: 'Franc', salary: 3000 },
    { id: 4, name: 'Andrew ', salary: 8000 }
  ];
  constructor() {}

  ngOnInit() {}
}

Let’s print the object array or object in Angular html component.

<div>
  {{employees}}
</div>

Output

[object Object],[object Object],[object Object],[object Object]

An object or array object prints object in [object object] format, which is not helpful for developer to debug on the content of an object.

Hence JSON pipe in Angular helpful developer to print the content of an object pretty json format.

Angular JSON pipe to print object array

Let’s use json pipe for an object or array of object.

<div>
  {{employees |json}}
</div>

And output

[ { "id": 1, "name": "Ram", "salary": 5000 }, { "id": 2, "name": "John", "salary": 1000 }, { "id": 3, "name": "Franc", "salary": 3000 }, { "id": 4, "name": "Andrew ", "salary": 8000 } ]

JSON displayed as a string format without delimiter or pretty format.

How do you print the json in pretty format

Angular json pipe to print in pretty format

JSON data can be displayed using pre tag in html

<pre><div>{{employees | json}}</div></pre>

Output:

[
  {
    "id": 1,
    "name": "Ram",
    "salary": 5000
  },
  {
    "id": 2,
    "name": "John",
    "salary": 1000
  },
  {
    "id": 3,
    "name": "Franc",
    "salary": 3000
  },
  {
    "id": 4,
    "name": "Andrew ",
    "salary": 8000
  }
]

Custom json pipe print in tab format

By default json pipe with 2 spaces provided by Angular.

export class JsonPipe implements PipeTransform {

  transform(value: any): string {
    return JSON.stringify(value, null, 2);
  }
}

We can write a custom pipe using JSON.stringify with 4 spaces

export class JsonTabPipe implements PipeTransform {

  transform(value: any): string {
    return JSON.stringify(value, null, 4);
  }
}

Angular JSON pipe circular pipe

Let’s have an model parent and child model in typescript.

export class Parent {
  id: number;
  child: Child;
}

export class Child {
  name: string;
  parent: Parent;
}

Let’s create an data initialize in parent and child object.

import { Component } from '@angular/core';
import { Child, Parent } from './parent';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  a = { name: 'Groucho', sibling: '' };
  b = { name: 'Harpo', sibling: this.a };
  parent: Parent;
  child: Child;
  constructor() {
    this.child = { name: 'ram', parent: this.parent };
    this.parent = { id: 1, child: this.child };
  }

  ngOnInit() {}
}

And existing template gives an error

<pre><div>{{child | json}}</div></pre>

It gives an error TypeError: Converting circular structure to JSON

So, json pipe will not work in Angular application.

you can use below JSON stringify way of using circular object.

JSON.stringify(parent);

JSON pipe is not working in Angular

When you are using json pipe, You used to get following errors

  • Unhandled Promise rejection: Template parse errors The pipe ‘json’ could not be found
  • JSON pipe not works in Angular
  • pipe not found in Angular

The reason is json pipe is an pipe from CommonModule of @angular/common module.

You have to import CommonModule in application module i.e app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {
  BrowserAnimationsModule
} from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    CommonModule,
    BrowserAnimationsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Angular json pipe stackblitz example

JSON pipe example is written in stackblitz example

Conclusion

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.