Json.human.js: Json Formatting for Human Beings

155 点作者 marianoguerra超过 11 年前

25 条评论

k3n超过 11 年前

I use this almost daily, lets you easily format/compact and edit JSON through a GUI:<a href="http://jsoneditoronline.org/" rel="nofollow">http://jsoneditoronline.org/</a>Easy to use, and makes working with complex JSON a snap.The source is also available:<a href="https://github.com/josdejong/jsoneditor/" rel="nofollow">https://github.com/josdejong/jsoneditor/</a>

评论 #6382123 未加载

评论 #6380813 未加载

jere超过 11 年前

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

评论 #6381411 未加载

aaronbrethorst超过 11 年前

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

评论 #6381904 未加载

评论 #6382218 未加载

th0br0超过 11 年前

I really enjoy JSONView for solving this problem.Chrome extension: <a href="https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/" rel="nofollow">https://chrome.google.com/webstore/detail/jsonview/chklaanhf...</a>Original firefox extension: <a href="http://benhollis.net/software/jsonview/" rel="nofollow">http://benhollis.net/software/jsonview/</a>

评论 #6380953 未加载

评论 #6381818 未加载

评论 #6383230 未加载

评论 #6380920 未加载

评论 #6381615 未加载

napoleond超过 11 年前

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

评论 #6380730 未加载

Erwin超过 11 年前

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.

评论 #6381921 未加载

评论 #6382657 未加载

评论 #6384012 未加载

joshstrange超过 11 年前

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] <a href="http://krumo.sourceforge.net/" rel="nofollow">http://krumo.sourceforge.net/</a>[2] <a href="https://chrome.google.com/webstore/detail/prettyprint/nipdlgebaanapcphbcidpmmmkcecpkhg?hl=en" rel="nofollow">https://chrome.google.com/webstore/detail/prettyprint/nipdlg...</a>

评论 #6380777 未加载

mythz超过 11 年前

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>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).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: <a href="http://servicestack.net/ServiceStack.Northwind/customers/ALFKI" rel="nofollow">http://servicestack.net/ServiceStack.Northwind/customers/ALF...</a>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>

BrandonSmith超过 11 年前

This reminds me of ColdFusion's cfdump:<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><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>

评论 #6380982 未加载

TeMPOraL超过 11 年前

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.

评论 #6381701 未加载

marianoguerra超过 11 年前

author here: let me know if you have any questions

评论 #6380758 未加载

randy_burden超过 11 年前

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>I've used this library recently to help the QA's better understand a JSON API's output.

alessioalex超过 11 年前

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>Edit: treeIt can be used also in Node, has tests written for it and you can customize the HTML template for it.

exizt88超过 11 年前

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.

评论 #6380799 未加载

techscruggs超过 11 年前

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.

评论 #6382908 未加载

sdfjkl超过 11 年前

I'm using Jason.app[1] on OS X which does this wonderfully (as desktop app).[1] <a href="https://github.com/tbrannam/Jason" rel="nofollow">https://github.com/tbrannam/Jason</a>

评论 #6382353 未加载

scrabble超过 11 年前

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.

评论 #6381432 未加载

评论 #6380963 未加载

capisce超过 11 年前

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>

abailin超过 11 年前

My go to JSON viewer continues to be <a href="http://json.parser.online.fr" rel="nofollow">http://json.parser.online.fr</a>

mjs7231超过 11 年前

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

评论 #6380993 未加载

boyander超过 11 年前

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

marknutter超过 11 年前

Should have called it humon.js. Missed opportunity.

duiker101超过 11 年前

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

debacle超过 11 年前

s/loosing/losing/

评论 #6380786 未加载

dotpot超过 11 年前

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