8 ms·
Json.human.js: Json Formatting for Human Beings
- marianoguerra 13y agoauthor here: let me know if you have any questions
- badclient 13y agoGreat 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.
- marianoguerra 13y agothanks! I created an issue for that: https://github.com/marianoguerra/json.human.js/issues/2 https://github.com/marianoguerra/json.human.js/issues/2 also one to customize the display of booleans (sometimes on/off, yes/no are better than true/false) https://github.com/marianoguerra/json.human.js/issues/3 https://github.com/marianoguerra/json.human.js/issues/3
- napoleond 13y agoIt might be good enough (and less complicated) to just optionally prettify camelCased and underscore_separated field names (to "Camel Case" and "Underscore Separated", respectively).
- napoleond 13y agoThis 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 13y agosince 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 13y agothe 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 13y agothat 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
- joshstrange 13y agoI 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/nipdlgebaanapcphbcidpmmmkcecpkhg?hl=en https://chrome.google.com/webstore/detail/prettyprint/nipdlg...
- marianoguerra 13y agoI 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).
- debacle 13y agos/loosing/losing/
- marianoguerra 13y agothanks! fixed and pushed, should update in some minutes.
- jere 13y agoAlso to/too in "to technical"
- marianoguerra 13y agothanks, 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.
- exizt88 13y agoDon'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=0001IV http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0... esp.
- marianoguerra 13y agoI 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.
- alessioalex 13y agoIt'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.
- k3n 13y agoI 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/
- marianoguerra 13y agonice! didn't know about it. in my case I needed a library to use it in a web app. bookmarked anyway for personal use :)
- jlogsdon 13y agoThe library that website is built on is Open Source. We use it for an internal project at work.
- soljin2000 13y agoI 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 13y agoIf you add an assignment at the beginning, you can do this in your browser console :)
- th0br0 13y agoI really enjoy JSONView for solving this problem. Chrome extension: https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/ https://chrome.google.com/webstore/detail/jsonview/chklaanhf... Original firefox extension: http://benhollis.net/software/jsonview/ http://benhollis.net/software/jsonview/
- jenius 13y agoWas just about to post this same thing, huge plus one. JSONView is a life saver, highly recommended.
- marianoguerra 13y agocan'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/)
- chucklarge 13y agoAnother vote for JSONView.
- cheald 13y agoDitto. Between the indentation, colorization, and tree collapsing, I don't need much more from a JSON viewer.
- gumballhead 13y agoI love it too. Maybe this should be dumped into a Chrome Extension for 'non-technical' people?
- mjs7231 13y agoI find the the input format much easier to mentally parse, and it's more compact too. Maybe I am not human.
- marianoguerra 13y agoI have the same doubt sometimes. happy programmers day! :)
- scrabble 13y agoThis 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.
- marianoguerra 13y agoyep, 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
- astrodust 13y agoI 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.
- BrandonSmith 13y agoThis reminds me of ColdFusion's cfdump: https://www.google.com/search?q=coldfusion+dump+object&tbm=isch https://www.google.com/search?q=coldfusion+dump+object&tbm=i... http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-7ef7.html http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0...
- marianoguerra 13y agothe 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
- capisce 13y agoOr just use QML: http://en.wikipedia.org/wiki/QML#Basic_syntax http://en.wikipedia.org/wiki/QML#Basic_syntax
- jere 13y agoPretty 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 13y agoabout 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
- deleted 13y ago[deleted]
- archivator 13y agoRe: list styling - you can make the whole list a different colour and also "extract" it with different borders. Consider indenting items more visibly - either more leading space or a more visual left border (e.g. something that looks like [ or { )
- jere 13y agoThanks 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?
- duiker101 13y agoI actually find easier to read raw json....
- aaronbrethorst 13y agoYou know, it's funny but I find the pretty-printed JSON easier to read than the formatted HTML.
- robmclarty 13y agoI 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 13y agoYes, 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)
- techscruggs 13y agoThis 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 13y agoI 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
- abailin 13y agoMy go to JSON viewer continues to be http://json.parser.online.fr http://json.parser.online.fr
- marknutter 13y agoShould have called it humon.js. Missed opportunity.
- randy_burden 13y agoI'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.
- TeMPOraL 13y agoI use http://james.padolsey.com/javascript/prettyprint-for-javascript/ 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 13y agonice, 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.
- Erwin 13y agoI 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 13y agoYAML 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 13y agoI use YAML for configs, as an option for API endpoints, and sometimes for debugging. Anything else that's computer-to-computer is JSON.
- krapp 13y agoI still like INI for configs. It's extremely simple and hard to mess up, and I think it's more readable than JSON.
- meowface 13y agoI 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.
- kanzure 13y agopyyaml 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.
- sdfjkl 13y agoI'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 13y agoAgreed, 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.
- mythz 13y agoI did something similar a few years ago with the HTML5 JSON Report Format: https://github.com/ServiceStack/ServiceStack/wiki/HTML5ReportFormat https://github.com/ServiceStack/ServiceStack/wiki/HTML5Repor... 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/ALFKI http://servicestack.net/ServiceStack.Northwind/customers/ALF... And the JSON service it's wrapping: http://servicestack.net/ServiceStack.Northwind/customers/ALFKI?format=json http://servicestack.net/ServiceStack.Northwind/customers/ALF...
- boyander 13y agoThat's funny because JSON is enough readable by itself. My life has changed a lot.
- dotpot 13y agofor me it's more easier to read json than html formatted one.