How to transforms JSON object to pretty-printed JSON using Angular Pipe ?

JSON stands for JavaScript Object Notation. It is a format for structuring data. This format is used by different web applications to communicate with each other. In this article, we will see How to use pipe to transform a JSON object to pretty-printed JSON using Angular Pipe. It meaning that it will take a JSON object string and return it pretty-printed/formatted to display to the user.

For example, it would take this:

{ "id": 1, "number": "K3483483344"}

Final Output:

{
         "id": 1,
         "number": "K3483483344"
}

And return something that looks like this when displayed in HTML.

Steps for Installing & Configuring the Angular Application

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Project Structure

It will look like the following:

Example 1: In this article, we will transform JSON object to pretty-printed using stringify.

HTML

<!-- app.component.html -->
<h2 style="color: green">GeeksforGeeks</h2>
<h2>
  Angular 2 pipe that transforms JSON
  object to pretty-printed JSON
</h2>
<pre [innerHTML]="gfg | pretty"></pre>

Javascript

// app.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    gfg = {
        course: 'GPL',
        description: 'Geeks Premier League 2023',
        vote: "Vote for me"
    }
}

Javascript

// app.module.ts
import { NgModule }
    from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { HttpClientModule }
    from '@angular/common/http';
import { AppComponent }
    from './app.component';
import { FormsModule }
    from '@angular/forms';
import { GeekPipe }
    from './geek.pipe';

@NgModule({
    declarations: [
        AppComponent,
        GeekPipe
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Javascript

// geek.pipe.js
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'pretty'
})

export class GeekPipe implements PipeTransform {

    transform(val: any) {
        return JSON.stringify(val, undefined, 4)
            .replace(/ /g, ' ')
            .replace(/\n/g, '<br/>');
    }
}

Output:

Example 2: This is another example, we will pass JSON object which has nested JSON object in it.

HTML

<!-- app.component.html -->
<h2 style="color: green">GeeksforGeeks</h2>
<h2>
  Angular 2 pipe that transforms JSON
  object to pretty-printed JSON
</h2>
<pre [innerHTML]="gfg | pretty"></pre>

Javascript

// app.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {

    gfg = {
        course: 'FrontEnd',
        description: 'Geeks Front End Courses',
        parts: {
            value1: 'HTML',
            value2: 'CSS',
            value3: 'Javascript',
            value4: 'Angular'
        }
    }
}

Javascript

// app.module.ts
import { NgModule }
    from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { HttpClientModule }
    from '@angular/common/http';
import { AppComponent }
    from './app.component';
import { FormsModule }
    from '@angular/forms';
import { GeekPipe }
    from './geek.pipe';

@NgModule({
    declarations: [
        AppComponent,
        GeekPipe
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Javascript

// geek.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'pretty'
})

export class GeekPipe implements PipeTransform {

    transform(val: any) {
        return JSON.stringify(val, undefined, 4)
            .replace(/ /g, ' ')
            .replace(/\n/g, '<br/>');
    }
}

Output: