Json.human.js: Json Formatting for Human Beings

[k3n]

I use this almost daily, lets you easily format/compact and edit JSON through a GUI:

http://jsoneditoronline.org/

Easy to use, and makes working with complex JSON a snap.

The source is also available:

https://github.com/josdejong/jsoneditor/

[soljin2000]

I think a tree view make for more sense for navigating JSON. The table view of the parser is very confusing for any JSON with lots of nesting.

[marianoguerra]

nice! didn't know about it.

in my case I needed a library to use it in a web app.

bookmarked anyway for personal use :)

[jere]

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:

- Remove quotes from strings. They're already formatted differently.

- Remove array indices.

- Unescape strings.

The context and formatting should still be enough for devs, but I can't imagine quotes or indices do anything for nontechnical people.

e.g. ["\"foo\"","bar"] translates to:

"foo"

bar

[marianoguerra]

about removing quotes from strings, I tought about it, and I think as long as some other display property is different (to differentiate the number 4 from the string "4") and something more than color to avoid causing trouble to colorblind people I think it's a good idea.

the array indices I was thinking on having it as an option, I would like 'something' to make them standout as lists even when no index is displayed, any idea?

will open issues for both:

* https://github.com/marianoguerra/json.human.js/issues/5

* https://github.com/marianoguerra/json.human.js/issues/6

[aaronbrethorst]

You know, it's funny but I find the pretty-printed JSON easier to read than the formatted HTML.

[robmclarty]

I agree. The "code" in the example page is, to me, easier to understand than the "human-readable" output.

For me, it's about spacing efficiency (I can see more at once), formatting (e.g., italic is not as easy to read as roman faces), and color (green on grey? huh?).

But I've always been a fan of plain-text in general. I'd much rather use plain-text markdown than MS Word, or edit code in plain files as opposed to an IDE. Plain text, to me, is much more WYSIWIG than any GUI tool I've used. But I understand that not everyone thinks the same way.

[r00fus]

Yes, but non-technical project members may not. This is pretty useful to pretty-print this information so it's readable in design docs, etc (it doesn't replace the json raw data, just explains it a bit better)

[th0br0]

I really enjoy JSONView for solving this problem.

Chrome extension: https://chrome.google.com/webstore/detail/jsonview/chklaanhf...

Original firefox extension: http://benhollis.net/software/jsonview/

[marianoguerra]

can't live without it to work with JSON APIs.

the lib from this article is more tailored for apps that want to display arbitrary json to a broad range of users. As someone asked, there are not many uses, but I have one in my web app (http://event-fabric.com/)

[cheald]

Ditto. Between the indentation, colorization, and tree collapsing, I don't need much more from a JSON viewer.

[gumballhead]

I love it too. Maybe this should be dumped into a Chrome Extension for 'non-technical' people?

[jenius]

Was just about to post this same thing, huge plus one. JSONView is a life saver, highly recommended.

[chucklarge]

Another vote for JSONView.

[napoleond]

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).

[marianoguerra]

since css classes tell you what's inside you can recover it completely, also I was thinking on using HTML5's data- to store the data there too.

the next next step would be to provide in place edition with validation :)

[Erwin]

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.

[kbenson]

YAML was my first thought as well. Why not a library that converts back and forth and displayed the YAML in a pre tag or textarea? Then you could edit the YAML and after converting back still have valid JSON.

YAML is a superset of JSON, but as long as the YAML used to convert to JSON started as JSON, there shouldn't be a problem.

[meowface]

I use YAML for configs, as an option for API endpoints, and sometimes for debugging. Anything else that's computer-to-computer is JSON.

[kanzure]

pyyaml provides the option of using the cyaml loader, but I dunno about the dumper.. if you're experiencing delays with reading, try setting Loader=cyaml or whatever.

[joshstrange]

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).

Where do you see this being used?

[1] http://krumo.sourceforge.net/

[2] https://chrome.google.com/webstore/detail/prettyprint/nipdlg...

[marianoguerra]

I made it because my app (http://event-fabric.com/) receives arbitrary JSON and one of the options you have is to inspect what is going through the steps, so I need the ability to format arbitrary and possibly nested JSON in a pretty way but without hidding the JSON structure because the app is to actually inspect and manipulate that JSON.

until now I was using a pretty printer but the result was too "technical" for non programmers to see (at least that's my opinion).

[mythz]

I did something similar a few years ago with the HTML5 JSON Report Format: https://github.com/ServiceStack/ServiceStack/wiki/HTML5Repor...

It's been baked into http://www.servicestack.net 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).

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).

Here's a live preview of it in action: http://servicestack.net/ServiceStack.Northwind/customers/ALF...

And the JSON service it's wrapping: http://servicestack.net/ServiceStack.Northwind/customers/ALF...

[BrandonSmith]

This reminds me of ColdFusion's cfdump:

https://www.google.com/search?q=coldfusion+dump+object&tbm=i...

http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0...

[marianoguerra]

the world is a circle

I was looking this morning at a lib to do this and I couldn't find one, but at one stack overflow question someone posted a screenshot of the ColdFusion tool and I said "that's what I need" and then I decided to do it myself.

now someone mentions it here, full circle :D

[TeMPOraL]

I use http://james.padolsey.com/javascript/prettyprint-for-javascr... 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.

[marianoguerra]

nice, I didn't found it this morning when looking for it, maybe since it says prettyprint for javascript it didn't rank high on the search results for my query.

[marianoguerra]

author here: let me know if you have any questions

[badclient]

Great work! Would be nice to add an option to convert json key names to human-friendly names(passed as a separate key value array). So a key like full_name can appear as "Your Name:" to the end user.

[randy_burden]

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: https://github.com/padolsey/prettyPrint.js

I've used this library recently to help the QA's better understand a JSON API's output.

[alessioalex]

It's the same idea as treeIt, a script I made a while ago: https://github.com/alessioalex/treeIt

Edit: treeIt can be used also in Node, has tests written for it and you can customize the HTML template for it.

[exizt88]

Don't use zebra coloring on tables. Edward Tufte strongly advises against this; see http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0... esp.

[marianoguerra]

I will read that later, I opened an Issue to remind myself :)

https://github.com/marianoguerra/json.human.js/issues/1

thanks, didn't know it was a bad practice.

[techscruggs]

This would be a fantastic option for the admin interface's of JSON document stores like CouchBase, ElasticSearch or RethinkDB.

JSON is easy to read, but can get hard to visually parse when the payload is large.

[dclowd9901]

I built something like this, but with the added functionality of admin-style inputs, much like what you seem to be looking for.

It's working (not done yet), but I've got an update on my local that I need to iron a bit before I commit.

Oh, and the name sucks.

https://github.com/dclowd9901/lscenery

[sdfjkl]

I'm using Jason.app[1] on OS X which does this wonderfully (as desktop app).

[1] https://github.com/tbrannam/Jason

[dwich]

Agreed, Jason.app is really handy for browsing, validating, prettifying, and minifying JSON. I think the outline view is even less friendly for a non-technical person though, listing every value as a name/data-type/value row.

[scrabble]

This is awesome.

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.

[astrodust]

I actually think the source example on that page is far more readable than the HTML formatted output.

Maybe I'm not human. Captchas have been telling me this for a while.

[marianoguerra]

yep, JSON is really readable when indented and colored, but if you need to display it to non technical people something more "tabular" may be a better solution.

that's the reason for this lib.

thanks for the awesome part :D

[capisce]

Or just use QML: http://en.wikipedia.org/wiki/QML#Basic_syntax

[abailin]

My go to JSON viewer continues to be http://json.parser.online.fr

[mjs7231]

I find the the input format much easier to mentally parse, and it's more compact too. Maybe I am not human.

[marianoguerra]

I have the same doubt sometimes.

happy programmers day! :)