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)
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, " "))
app.filter("prettyJSON", () => json => JSON.stringify(json, null, " "))
TypeError: Converting circular structure to JSON. I guess that's a separate issueAnother 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/
A simpler code:
app.filter('prettyJSON', function () {
return function(json) { return angular.toJson(json, true); }
});
Remember to use the <pre> tag
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.
