javascript – AngularJS format JSON string output-ThrowExceptions

Exception or error:

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.

How to solve:

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
    }
}"

###

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="angular.js@1.2.15" 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)

###

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/

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

 editable

<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>

Leave a Reply

Your email address will not be published. Required fields are marked *