Is there a way to pretty-print JSON in a web page using JavaScript?

Question

Seems to me that pretty-printing JSON is a simple enough task that JavaScript should be able to handle it. Has anyone ever written (or run across) a JavaScript function to do this?

mgamer · Answer 1 · 2013-01-02T23:01:06.437

11

An easy way to do this is to execute:

JSON.stringify(data, null, "  ");

where data is the json object you want to print pretty.

Not every browser contains JSON though. You can include json.js by Douglas Crockford which add global JSON object if it is not supported natively by the browser.

edited Jan 02 '13 at 23:01

answered Apr 02 '11 at 15:11

mgamer

13,580
25
87
145

1

JSON.stringify is not terribly pretty, even with extra spaces. I found the vkbeautify link below to be a great solution. – mm2001 Mar 21 '13 at 15:54
1

this seems like a bad solution, since subsequent calls to pretty print JSON might be then bastardized – Alexander Mills May 12 '15 at 22:26

score 5 · Answer 2 · answered Aug 27 '16 at 16:22

I use this bookmarklet code on my browsers to make the JSON paragraph readable

javascript:(function(){document.body.firstChild.innerHTML = JSON.stringify(JSON.parse(document.body.firstChild.innerHTML), null, 4);})();

Adding a bookmarklet is easy - right click on bookmarks bar - Add/New - provide a name and paste js in url / location box

As current day browsers are putting the json response in a <pre> tag inside, i use body.firstChild

score 2 · Answer 3 · answered Jan 25 '12 at 20:47

2

take a look at vkbeautify.js plugin

http://www.eslinstructor.net/vkbeautify/

it provides pretty print for both JSON and XML text.

written in plain javascript, small and fast.

answered Jan 25 '12 at 20:47

vadimk

1,461
15
11

I really liked this solution. It worked great with node and I see they also have a browser version. – mm2001 Mar 21 '13 at 15:55
Disclaimer: vkbeautify.json is a wrapper to JSON.stingify – Birla Oct 26 '13 at 08:52

score 1 · Answer 4 · answered Sep 07 '16 at 00:27

1

You can give this a try it will add in some nice CSS.

<pre style="font-family: Courier;background: #f4f4f4;border: solid 1px #e1e1e1;float: left;width: auto;">
    JSON.stringify(data, null,' ').replace('[', '').replace(']', '')
</pre>

answered Sep 07 '16 at 00:27

Rick

12,606
2
43
41

score 1 · Answer 5 · edited May 23 '17 at 11:54

1

JavaScript data formatting/pretty printer

edited May 23 '17 at 11:54

Community

1
1

answered Jan 19 '11 at 19:35

Amol Katdare

6,740
2
33
36

score 1 · Accepted Answer · answered Apr 14 '11 at 15:25

1

What I ended up doing is installing the JSONView add-on for Mozilla. Not perfect, but it gets done what I needed done.

answered Apr 14 '11 at 15:25

Hot Licks

47,103
17
93
151

score 0 · Answer 7 · answered Jan 19 '11 at 19:36

0

If you want this for yourself (debugging purposes) you can use Greasemonkey: http://misc.slowchop.com/misc/wiki/HumanReadableJSONGreasemonkey

If you want the output for your users: http://jsonformatter.curiousconcept.com/

answered Jan 19 '11 at 19:36

capdragon

14,565
24
107
153

Is there a way to pretty-print JSON in a web page using JavaScript?

7 Answers7

Linked