Steve Dolan Steve Dolan - 5 months ago 125
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>


I would create a custom pipe for this:

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

and use it this way:

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

See this plunkr: