How to make a JSON formatter with JS and HTML?

Question

I need a JSON formatter in my web application which is developed using Angular JS and Java.

I basically want such JSON formatter that shows JSON in its formatted view. I wanted formatter because normally when i render my JSON text in html, it is showed just like bunch of texts.

Thats why i wanted to make JSON formatter to show these JSON text in formatted view. It will help users to understand the JSON easily.

In my application user input JSON for different purposes. For example, admin input / modify JSON for dynamic fields generation. JSON text will store in DB. I want to make a common JSON formatter for all the purposes. If not possible different JSON formatter for different operation.

Some people suggest me to use JSON.stringify(). But How can i use this for my purpose? or Any other idea?

Duplicate of [**How can I beautify JSON programmatically?**](http://stackoverflow.com/questions/2614862/how-can-i-beautify-json-programmatically). — ryeballar, Jan 06 '15 at 07:03
I'd add the example from the comment to the post. It appears, that your problem is not actually a non-working `JSON.stringify()`, rather it's how HTML shows the string. That might prevent the question to be closed as a dup. — Teemu, Jan 06 '15 at 07:46
I needed the angular JS solution. mia gave the answer already.. — , Jan 06 '15 at 09:07

Kuldeep Dangi · Accepted Answer · 2015-01-06T09:28:24.380

0

JSON.stringify is what you are looking for

JSON.stringify(jsonObject, null, 4); // stringify with spaces (recommended)
JSON.stringify(jsonObject, null, '\t'); // stringify with tabs

Real world example:

<html>
    <body>
        <pre>
            <div id="stringifiedCode">

            </div>
        </pre>
    </body>
</html>

<script type="text/javascript">
var obj = { "hello" : "world", "Test" : [ "hello" ] };
document.getElementById('stringifiedCode').innerHTML =JSON.stringify(obj, null, 4);
</script>

edited Jan 06 '15 at 09:28

answered Jan 06 '15 at 07:14

Kuldeep Dangi

4,126
5
33
56

var obj = { "hello" : "world", "Test" : [ "hello" ] } document.body.innerHTML = ""; document.body.appendChild(document.createTextNode(JSON.stringify(obj, null, 4))); I used this but doesn't work. Any library needed ? – Jan 06 '15 at 07:21
No libraries needed, that [works just fine](http://jsfiddle.net/vrha90st/). Notice, that JSON string contains characters like `\n` which can't be shown in all HTML elements. – Teemu Jan 06 '15 at 07:31
Yep, there's an error message. You have to [put the script after the `textarea`](http://plnkr.co/edit/lQ9bVo7wLyIXpAatyR9L?p=preview), or wrap it in `window.onload` handler. – Teemu Jan 06 '15 at 07:41
Your answer help me... But mia's solution is more efficient.. And i told that i am using angular js .... he provide me the answer in angular js. – Jan 06 '15 at 09:08

mia · Answer 2 · 2015-01-06T08:13:50.837

0

HTML:

<div ng-app="myapp" ng-controller="myctrl">
    <pre>{{ str|json }}</pre>
</div>

Script:

angular.module('myapp',[])
 .controller('myctrl',function($scope){
     $scope.str = {name:'Joe',address:'xyz',mobile:['154552','45698']};
  });

Plunker

edited Jan 06 '15 at 08:13

answered Jan 06 '15 at 07:49

mia

1,148
1
11
17

How to make a JSON formatter with JS and HTML?

2 Answers2