AngularJS format JSON string output

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:

enter image description here

And not like it looks now:

enter image description here

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.



You can use an optional parameter of JSON.stringify()

JSON.stringify(value[, replacer [, space]])


  • 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

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


angular.module('app', [])
  .controller('Ctrl', ['$scope',
    function($scope) {

      $ = {
        a: 1,
        b: 2,
        c: {
          d: "3"

<!DOCTYPE html>
<html ng-app="app">

    <script data-require="[email protected]" data-semver="1.2.15" src="//"></script>

  <body ng-controller="Ctrl">
    <pre>{{data | json}}</pre>


There's also an angular.toJson method, but I haven't played around with that (Docs)


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:

enter image description here


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)


I guess you want to use to edit the json text. Then you can use ivarni's way:

{{data | json}}
and add an adition attribute to make

<pre contenteditable="true">{{data | json}}</pre>

Hope this can help you.


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>


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.