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

javascript json filter angular pipe
Derek picture Derek · May 18, 2016 · Viewed 86.7k times · Source

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

Shane Hsu picture Shane Hsu · May 22, 2016

I would like to add an even simpler way to do this, using the built-in json pipe:

<pre>{{data | json}}</pre>

This way, the formatting is preserved.

Related questions

ngRepeat Filter by deep property

If I have a complex object with objects as property values, how can I filter by one of the nested properties? Can this be done with the OOB ng-repeat filter? Data { Name: 'John Smith', Manager: { id: 123, Name: 'Bill Lumburg' } } ngRepeat &…

Read More
AngularJs, filter case insensitive

I've got an json full of datas with lowcase and upcase. For example : [ { "firstName":"JoHn" , "lastName":"DoE" }, { "firstName":"aNnA" , "lastName":"smIth" }, { "firstName":"PeTer" , "lastName":"JOnes" } ] And I've got something similar to this : Search: <input ng-model="searchText"> <table …

Read More
Parse JSON in JavaScript?

I want to parse a JSON string in JavaScript. The response is something like var response = '{"result":true,"count":1}'; How can I get the values result and count from this?

Read More