I use this almost daily, lets you easily format/compact and edit JSON through a GUI:<p><a href="http://jsoneditoronline.org/" rel="nofollow">http://jsoneditoronline.org/</a><p>Easy to use, and makes working with complex JSON a snap.<p>The source is also available:<p><a href="https://github.com/josdejong/jsoneditor/" rel="nofollow">https://github.com/josdejong/jsoneditor/</a>
Pretty funny considering JSON is self described as "easy for humans to read and write." If your target is nontechnical folks, I wonder if it would be useful to go a step further and:<p>- Remove quotes from strings. They're already formatted differently.<p>- Remove array indices.<p>- Unescape strings.<p>The context and formatting should still be enough for devs, but I can't imagine quotes or indices do anything for nontechnical people.<p>e.g. ["\"foo\"","bar"] translates to:<p><i>"foo"</i><p><i>bar</i>
This is great! And nicely written--it would be very easy to modify this to format things differently. Eventually, it would be cool to have the conversion go both ways. That way it could be incorporated in a CMS (arbitrary structured content being passed around as JSON but displayed and edited in HTML).
I dump my JSON as YAML. Even if you are not using YAML for saving data (and I don't -- in Python at least PyYAML is orders of magnitudes slower than the built-in JSON), it is nicer to read.
I can understand the usefulness of things like Krumo[1] for PHP but I am struggling to understand the use-case for this. With a language like PHP you don't have direct manipulation abilities (without debugging using an extension) so it makes sense that you need to format the data before you send it to the client but with JS you have the ability to inspect the JS directly. Also I think JSON (with spaces/indentions/linebreaks) is extremely readable (Especially with things like PrettyPrint[2] installed).<p>Where do you see this being used?<p>[1] <a href="http://krumo.sourceforge.net/" rel="nofollow">http://krumo.sourceforge.net/</a><p>[2] <a href="https://chrome.google.com/webstore/detail/prettyprint/nipdlgebaanapcphbcidpmmmkcecpkhg?hl=en" rel="nofollow">https://chrome.google.com/webstore/detail/prettyprint/nipdlg...</a>
I did something similar a few years ago with the HTML5 JSON Report Format: <a href="https://github.com/ServiceStack/ServiceStack/wiki/HTML5ReportFormat" rel="nofollow">https://github.com/ServiceStack/ServiceStack/wiki/HTML5Repor...</a><p>It's been baked into <a href="http://www.servicestack.net" rel="nofollow">http://www.servicestack.net</a> web service fx and lets you see a human readable view of every web service response when called from a browser (i.e. Accept:text/html).<p>It's also has dynamically sortable table rows and is also completely static/stand-alone. It's just a static template that wraps an embedded JSON response and converting it to HTML on the fly and injecting it the page (all client-side / use view-source).<p>Here's a live preview of it in action:
<a href="http://servicestack.net/ServiceStack.Northwind/customers/ALFKI" rel="nofollow">http://servicestack.net/ServiceStack.Northwind/customers/ALF...</a><p>And the JSON service it's wrapping:
<a href="http://servicestack.net/ServiceStack.Northwind/customers/ALFKI?format=json" rel="nofollow">http://servicestack.net/ServiceStack.Northwind/customers/ALF...</a>
This reminds me of ColdFusion's cfdump:<p><a href="https://www.google.com/search?q=coldfusion+dump+object&tbm=isch" rel="nofollow">https://www.google.com/search?q=coldfusion+dump+object&tbm=i...</a><p><a href="http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-7ef7.html" rel="nofollow">http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0...</a>
I use <a href="http://james.padolsey.com/javascript/prettyprint-for-javascript/" rel="nofollow">http://james.padolsey.com/javascript/prettyprint-for-javascr...</a> at work in a debugging interface for AJAX requests. Sometimes having JSON pretty-printed in the sidebar is more convenient than clicking on it to expand it in the console.
I've been using a library called prettyprint.js for quite some time that basically does the same thing but a bit prettier and from what I remember is basically a port of sorts of Coldfusion's cfdump: <a href="https://github.com/padolsey/prettyPrint.js" rel="nofollow">https://github.com/padolsey/prettyPrint.js</a><p>I've used this library recently to help the QA's better understand a JSON API's output.
It's the same idea as treeIt, a script I made a while ago: <a href="https://github.com/alessioalex/treeIt" rel="nofollow">https://github.com/alessioalex/treeIt</a><p>Edit: treeIt can be used also in Node, has tests written for it and you can customize the HTML template for it.
Don't use zebra coloring on tables. Edward Tufte strongly advises against this; see <a href="http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001IV" rel="nofollow">http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0...</a> esp.
This would be a fantastic option for the admin interface's of JSON document stores like CouchBase, ElasticSearch or RethinkDB.<p>JSON is easy to read, but can get hard to visually parse when the payload is large.
I'm using Jason.app[1] on OS X which does this wonderfully (as desktop app).<p>[1] <a href="https://github.com/tbrannam/Jason" rel="nofollow">https://github.com/tbrannam/Jason</a>
This is awesome.<p>It's funny, I didn't think it would be useful until I actually checked it out, because I personally find JSON to be fairly readable.
Or just use QML: <a href="http://en.wikipedia.org/wiki/QML#Basic_syntax" rel="nofollow">http://en.wikipedia.org/wiki/QML#Basic_syntax</a>