{

Angular 13 Pipe Json examples | pretty format code


Angular json pipe Example

It is a short tutorial about angular pipe json examples.

  • How to print json objects in Angular component

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

It is useful to convert a typescript object into JSON format type and debug and manipulate object data.

Here is the syntax in the HTML template

{{object|json}}

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

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

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

Let’s create an angular typescript component. Create and Initialize an array of an 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 the Angular HTML component.

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

Output

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

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

Hence JSON pipe in Angular helpful developers to print the content of an object in 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 a model parent and child model in typescript.

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

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

Let’s create a data initialize in parent and child objects.

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 the below JSON stringify way of using the circular object.

JSON.stringify(parent);

JSON pipe is not working in Angular

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

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

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

You have to import CommonModule in the 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

To Sum up, Learned what is json pipe with syntax in Angular and displays formatted currency numbers.

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.