Angular 15 Pipe Json examples | pretty format code

It is a short tutorial about angular pipe json examples.

How to print json objects in the Angular component

Angular has an 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 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 objects.

<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 is displayed as a string format without a delimiter or pretty format.

How do you print the json in a 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 is 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 initialization 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 the 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.
The 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 examples🔗

Conclusion

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