

Json.human.js: Json Formatting for Human Beings - marianoguerra
http://marianoguerra.github.io/json.human.js/

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

[http://jsoneditoronline.org/](http://jsoneditoronline.org/)

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

The source is also available:

[https://github.com/josdejong/jsoneditor/](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.

~~~
antihero
If you add an assignment at the beginning, you can do this in your browser
console :)

------
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/5)

* [https://github.com/marianoguerra/json.human.js/issues/6](https://github.com/marianoguerra/json.human.js/issues/6)

~~~
jere
Thanks for the quick response. I guess I should have opened issues myself, but
I have some irrational fear about using github features.

>something more than color to avoid causing trouble to colorblind people I
think it's a good idea.

I think what you have is decent. Bold for numbers. Italics for literals.

Making arrays stand out is tough. Perhaps you could do some zebra striping on
arrays. Or use bullets outside of each array value that mimics a list?

~~~
marianoguerra
someone in the comments here said that zebra stripes are a bad practice and
linked to some resources about that, so guess zebra stripes won't do (I'm also
using them for objects, so they won't stand out as lists but as collections of
things together with objects)

someone pointed out on an issue that empty lists and empty objects can't be
differentiated, so a solution that handles both would be cool.

question: why the github fear? :)

~~~
jere
Without derailing this thread, tldr: social anxiety around contributing to
OSS. That sounds pretty dumb I know.

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

------
th0br0
I really enjoy JSONView for solving this problem.

Chrome extension:
[https://chrome.google.com/webstore/detail/jsonview/chklaanhf...](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/)

Original firefox extension:
[http://benhollis.net/software/jsonview/](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/](http://event-
fabric.com/))

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

~~~
napoleond
_the next next step would be to provide in place edition with validation :)_

Definitely! Take a look at
[http://createjs.org/\--it](http://createjs.org/--it) will probably help (in
fact, I've been using it for a different project and if I have time I might be
submitting a pull request to you in the next week or so).

~~~
marianoguerra
that would be cool, let's track it here:
[https://github.com/marianoguerra/json.human.js/issues/7](https://github.com/marianoguerra/json.human.js/issues/7)

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

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

~~~
krapp
I still like INI for configs. It's extremely simple and hard to mess up, and I
think it's more readable than JSON.

~~~
meowface
I use INI for configs most of the time, too, but if I ever need multiple-
nesting or lists, I don't really have any choice but YAML. It's not common
that I need that, but it can be useful for really big applications.

I always try to use the right tool for the job.

------
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/](http://krumo.sourceforge.net/)

[2]
[https://chrome.google.com/webstore/detail/prettyprint/nipdlg...](https://chrome.google.com/webstore/detail/prettyprint/nipdlgebaanapcphbcidpmmmkcecpkhg?hl=en)

~~~
marianoguerra
I made it because my app ([http://event-fabric.com/](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...](https://github.com/ServiceStack/ServiceStack/wiki/HTML5ReportFormat)

It's been baked into
[http://www.servicestack.net](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...](http://servicestack.net/ServiceStack.Northwind/customers/ALFKI)

And the JSON service it's wrapping:
[http://servicestack.net/ServiceStack.Northwind/customers/ALF...](http://servicestack.net/ServiceStack.Northwind/customers/ALFKI?format=json)

------
BrandonSmith
This reminds me of ColdFusion's cfdump:

[https://www.google.com/search?q=coldfusion+dump+object&tbm=i...](https://www.google.com/search?q=coldfusion+dump+object&tbm=isch)

[http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0...](http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-7ef7.html)

~~~
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...](http://james.padolsey.com/javascript/prettyprint-for-javascript/)
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.

~~~
napoleond
It might be good enough (and less complicated) to just optionally prettify
camelCased and underscore_separated field names (to "Camel Case" and
"Underscore Separated", respectively).

------
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](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](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...](http://www.edwardtufte.com/bboard/q-and-a-fetch-
msg?msg_id=0001IV) esp.

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

[https://github.com/marianoguerra/json.human.js/issues/1](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](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](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.

~~~
sdfjkl
Why are non-technical people looking at JSON?

~~~
dwich
I don't know of a particular example. I only mentioned that in the context of
the json.human.js library apparently targeting non-techies.

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

------
capisce
Or just use QML:
[http://en.wikipedia.org/wiki/QML#Basic_syntax](http://en.wikipedia.org/wiki/QML#Basic_syntax)

------
abailin
My go to JSON viewer continues to be
[http://json.parser.online.fr](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! :)

------
boyander
That's funny because JSON is enough readable by itself. My life has changed a
lot.

------
marknutter
Should have called it humon.js. Missed opportunity.

------
duiker101
I actually find easier to read raw json....

------
debacle
s/loosing/losing/

~~~
marianoguerra
thanks! fixed and pushed, should update in some minutes.

~~~
jere
Also to/too in "to technical"

~~~
marianoguerra
thanks, fixed and pushed.

HN is like a free proof reader as a service :P

when two words have similar pronunciation I may write the wrong one.

------
dotpot
for me it's more easier to read json than html formatted one.

