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?
Add a comment
|
7 Answers
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.
-
1JSON.stringify is not terribly pretty, even with extra spaces. I found the vkbeautify link below to be a great solution.– mm2001Commented Mar 21, 2013 at 15:54
-
1this seems like a bad solution, since subsequent calls to pretty print JSON might be then bastardized Commented May 12, 2015 at 22:26
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
-
This is awesome, still working in 2023 (if you ignore the word 'bookmarklet') ! Commented Jan 21, 2024 at 20:57
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.
-
I really liked this solution. It worked great with node and I see they also have a browser version.– mm2001Commented Mar 21, 2013 at 15:55
-
answered Jan 19, 2011 at 19:35
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, 2011 at 19:36
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, 2011 at 15:25
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>
