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 ?

It seems like json is already a string so stringifying it isn't going to work properly. Try JSON.stringify(JSON.parse($scope.json), null, "\t") — Explosion Pills
– Explosion Pills, Commented Apr 9, 2015 at 20:06

Steve · Accepted Answer · 2015-04-09 20:08:50Z

4

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

answered Apr 9, 2015 at 20:08

Steve

2761 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mukund Kumar Over a year ago

it is working. but if you will take json from input in that case it will not work.

Steve Over a year ago

Can you clarify? You are entering in JSON in an input field you made and it's not formatting correctly?

Steve Over a year ago

Yeah, I see that. Are you trying to make a tool that creates JSON from user input? So, you would need to do some more stuff to make that work, you could have them enter an object name then save it to an array then that is what you print out, not the direct user input since that is messy. Does that make sense?

Mukund Kumar Over a year ago

yes, you are right. but we can do it using this code: JSON.stringify(JSON.parse($scope.json), null, "\t")

Jon Koops · Accepted Answer · 2015-04-09 20:13:45Z

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

answered Apr 9, 2015 at 20:13

Jon Koops

9,4306 gold badges33 silver badges54 bronze badges

Comments

Brad Barber · Accepted Answer · 2015-04-09 20:07:22Z

1

Angular provides a helper for this:

angular.toJson(json, true);

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

answered Apr 9, 2015 at 20:07

Brad Barber

2,9631 gold badge21 silver badges18 bronze badges

Collectives™ on Stack Overflow

How can I beautify JSON programmatically in angular js?

3 Answers 3

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

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

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

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related