57

How can I use this json pretty print [ http://jsfiddle.net/KJQ9K/ ] with angularJS?

Lets assume myJsonValue is 

{a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]}

I want to be able to use below to render pre (as shown in example)

c69
  • 19,951
  • 7
  • 52
  • 82
aug70co
  • 3,965
  • 5
  • 30
  • 44

4 Answers4

128

Angular already has the json filter built-in:

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

The json after the pipe | is an Angular Filter. You can make your own custom filter if you like:

app.filter('prettyJSON', function () {
    function prettyPrintJson(json) {
      return JSON ? JSON.stringify(json, null, '  ') : 'your browser doesnt support JSON so cant pretty print';
    }
    return prettyPrintJson;
});

To use your custom prettyJSON filter:

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

ES6 version from @TeChn4K:

app.filter("prettyJSON", () => json => JSON.stringify(json, null, " "))
Michael Cole
  • 15,473
  • 7
  • 79
  • 96
  • 4
    Best answer. One line with the es6 syntax : `app.filter("prettyJSON", () => json => JSON.stringify(json, null, " "))` – TeChn4K Jan 14 '16 at 13:39
  • For my structure it throws `TypeError: Converting circular structure to JSON`. I guess that's a [separate issue](https://stackoverflow.com/q/11616630/1175496) – Nate Anderson Sep 03 '17 at 01:05
19

Another option is to turn the function into a filter...

app.filter('prettify', function () {

    function syntaxHighlight(json) {
        // ...
    }

    return syntaxHighlight;
});

HTML...

<pre ng-bind-html="json | prettify"></pre>

JsFiddle: http://jsfiddle.net/KSTe8/

Anthony Chu
  • 37,170
  • 10
  • 81
  • 71
  • Worked but I'm seeing below error message now; "Error: json is undefined syntaxHighlight@http://dev.redrum.us/scripts/app.js:25 Xa.prototype.filter/e@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:158........." – aug70co Apr 02 '14 at 04:17
  • See below for a simpler answer. The JSON object isn't in all browsers, so that's probably why it's failing. There is a json.js shim out there somewhere. – Michael Cole Dec 11 '14 at 14:12
  • Polyfil JSON: http://stackoverflow.com/questions/10963723/json-polyfill-json-2-or-json-3 – Michael Cole Dec 11 '14 at 14:13
  • Perfect solution! – Rohit Parte May 30 '19 at 09:30
9

A simpler code:

app.filter('prettyJSON', function () {
    return function(json) { return angular.toJson(json, true); }
});

Remember to use the <pre> tag

chrmcpn
  • 574
  • 6
  • 10
0

You have a few options. What I consider the most "AngularJS" way is to wrap your custom object into an Angular service:

myAngularModule.service('myPrettyPrintService', ,myObject );

The inject that into a controller:

myAngularModule.controller('myTestController', function(myPrettyPrintService){}

Then inside the controller, reference the functions and sort:

myPrettyPrintService.syntaxHighlight();

Since anything defined in JavaScript, is global anyway you could technically just access it inside a controller:

syntaxHighlight();

That may screw up with unit testingt because it adds a external, undefined, dependency to your controller.

JeffryHouser
  • 39,401
  • 4
  • 38
  • 59