AngularJS format JSON string output
JavascriptJsonStringAngularjsFormattingJavascript Problem Overview
I have an AngularJS application, which collects data from input, transforms a model into a string using JSON.stringify() and lets a user edit this model in such a way that input fields get updated if the <textarea> element is updated and vice versa. Some kind of two-way binding :)
The problem is that the String itself looks ugly and I would like to format it so it looks like this:
And not like it looks now:
Any ideas how this can be accomplished? If you need some additional info - don't hesitate asking. Every answer is highly appreciated and answered immediately.
Thank you.
P.S. I guess this should be some kind of directive or a custom filter. Data itself SHOULD NOT be changed, only the output.
Javascript Solutions
Solution 1 - Javascript
Angular has a built-in filter for showing JSON
<pre>{{data | json}}</pre>
Note the use of the pre-tag to conserve whitespace and linebreaks
Demo:
angular.module('app', [])
.controller('Ctrl', ['$scope',
function($scope) {
$scope.data = {
a: 1,
b: 2,
c: {
d: "3"
},
};
}
]);
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="[email protected]" data-semver="1.2.15" src="//code.angularjs.org/1.2.15/angular.js"></script>
</head>
<body ng-controller="Ctrl">
<pre>{{data | json}}</pre>
</body>
</html>
There's also an angular.toJson method, but I haven't played around with that (Docs)
Solution 2 - Javascript
You can use an optional parameter of JSON.stringify()
> JSON.stringify(value[, replacer [, space]])
>
> Parameters
>
> - value The value to convert to a JSON string.
> - replacer If a function,
> transforms values and properties encountered while stringifying; if an
> array, specifies the set of properties included in objects in the
> final string. A detailed description of the replacer function is
> provided in the javaScript guide article Using native JSON.
> - space
> Causes the resulting string to be pretty-printed.
For example:
JSON.stringify({a:1,b:2,c:{d:3, e:4}},null," ")
will give you following result:
"{
"a": 1,
"b": 2,
"c": {
"d": 3,
"e": 4
}
}"
Solution 3 - Javascript
If you are looking to render JSON as HTML and it can be collapsed/opened, you can use this directive that I just made to render it nicely:
https://github.com/mohsen1/json-formatter/
Solution 4 - Javascript
In addition to the angular json filter already mentioned, there is also the angular toJson() function.
angular.toJson(obj, pretty);
The second param of this function lets you switch on pretty printing and set the number of spaces to use.
> If set to true, the JSON output will contain newlines and whitespace. If set to an integer, the JSON output will contain that many spaces per indentation. > > (default: 2)
Solution 5 - Javascript
I guess you want to use
Solution 6 - Javascript
If you want to format the JSON and also do some syntax highlighting, you can use the ng-prettyjson directive. See the npm package.
Here is how to use it: <pre pretty-json="jsonObject"></pre>