How can I beautify JSON programmatically in angular js?

Question

I know how to beautify JSON programmatically using javascript. this way we can achieve:

var obj = {"hello":"world", "Test":["hello"]}
document.body.innerHTML = "";
document.body.appendChild(document.createTextNode(JSON.stringify(obj, null, 4)));

But i tried to do it in angular js. but i am unable to achieve this. This is my step :

<div class="btn btn-primary" ng-click="test()">Press</div>
<textarea  json-formatter rows="20" cols="140" ng-model="json">
</textarea>

$scope.test=function(){
        var json=JSON.stringify($scope.json, null, "\t");
        /*here if $scope.json is {"hello":"world", "Test":["hello"]}
        then json return "{\"hello\":\"world\", \"Test\":[\"hello\"]}" */
}

here if $scope.json is {"hello":"world", "Test":["hello"]} then json return "{\\"hello\\":\\"world\\", \\"Test\\":[\\"hello\\"]}" .after that, i don't now how to display beautify json to same text area. How to resolve this problem. Is there any other approach then please suggest me ?

Answer 1

There is a built in feature for filtering json {{Object | json }}

You can use the built in filter for your code

{{dataObject | json}} 

Will beautify your json, give it a try.

Here is a working example:

http://plnkr.co/edit/DM1TbN3eXGngJaFgi6n6?p=preview

Answer 2

You can use Angular's built in json filter to pretty print an object.

In your view you can use the filter as follows:

{{yourData | json}}

The indentation can be customised by passing a second numerical value into the filter:

{{yourData | json:4}}

A working example of this code can be found here: http://jsbin.com/nakazuhaqa/1/edit?html,js,output

Answer 3

Angular provides a helper for this:

angular.toJson(json, true);

https://docs.angularjs.org/api/ng/function/angular.toJson