Steve Dolan Steve Dolan - 6 months ago 250
JSON Question

Angular 2 pipe that transforms JSON object to pretty-printed JSON

Trying to write an Angular 2 pipe that 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",
"state": "CA",
"active": true
}


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

enter image description here

So in my view I could have something like:

<td> {{ record.jsonData | prettyprint }} </td>

Answer

I would create a custom pipe for this:

@Pipe({
  name: 'prettyprint'
})
export class PrettyPrintPipe {
  transform(val) {
    return JSON.stringify(val, null, 2)
      .replace(' ', '&nbsp;')
      .replace('\n', '<br/>');
  }
}

and use it this way:

@Component({
  selector: 'my-app',
  template: `
    <div [innerHTML]="obj | prettyprint"></div>
  `,
  pipes: [ PrettyPrintPipe ]
})
export class AppComponent {
  obj = {
    test: 'testttt',
    name: 'nameeee'
  }
}

See this plunkr: https://plnkr.co/edit/WbywRZTrpBoX3UsROYuS?p=preview.