marianoguerra/json.human.js

Convert JSON to human readable HTML

json.human.js: Json Formatting for Human Beings

A small library to convert a JSON object into a human readable HTML representation that is easy to style for different purposes.

Who?

Mariano Guerra

Why?

At Event Fabric we need to display JSON to people from all technical levels without being to technical but also without losing information about the underlying JSON object.

How?

you can see js/demo.js in this repo for an example or use it live at the project page

var node = JsonHuman.format(input);
output.appendChild(node);

Additional options parameter can be supplied

var input = {
      "url" : [
            "www.google.com",
            "www.google.com",
            {
              "x" : "x-direction",
              "y" : "y-direction",
              "url" : "www.google.com"
            }
      ]
};

var node = JsonHuman.format(input, {
    // Show or hide Array-Indices in the output
    showArrayIndex: true,

    // Hyperlinks Option
    // Enable <a> tag in the output html based on object keys
    // Supports only strings and arrays
    hyperlinks : {
        enable : true,
        keys: ['url'],          // Keys which will be output as links
        target : '_blank'       // 'target' attribute of a
    },

    // Options for displaying bool
    bool : {
        // Show text? And what text for true & false?
        showText : true,
        text : {
            true : "Yes",
            false : "No"
        },

        // Show image? And which images (urls)?
        showImage : true,
        img : {
            true : 'css/true.png',
            false : 'css/false.png'
        }
    }
});

To install it, if you're using Bower you can just run:

bower install json-human --save

Alternatives

• prettyprint.js: https://github.com/padolsey/prettyPrint.js

License?

MIT

json.human.js's Issues

console.table(object[, columns]); might provide more ideas

See
https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#console-table

and the original
http://getfirebug.com/wiki/index.php/Console_API#console.table.28data.5B.2C_columns.5D.29
(see also http://www.softwareishard.com/blog/firebug/tabular-logs-in-firebug/)

Chrome Extension?

Would you be interested in creating a Chrome Extension with this functionality?

For example, when you visit http://graph.facebook.com/facebook, it would parse it with this library.

I am currently using the JSON Formatter (https://github.com/callumlocke/json-formatter) and it is great. JSON Formatter could be used as a model to incorporate this library into it's own extension.

use ol for arrays?

maybe as an option?

Update to the latest crel

Your version depends on jsdom - the new one does not (and works fine with json.human.js).

Retain multiple whitespaces

I thought I just throw this in: if strings are represented as-is and special stuff like \n or > stays raw as well, it would make sense to stop browser from displaying, for example, " padded " as " padded ". I'm thinking about <pre>.

customize inline styles

This is exactly what I have been looking for and it works great but sadly I would like to send the table via email and external styles aren't really supported. Would it be possible to have a config parameter like styles: { th: 'border: 1px solid black', td: 'some css' } and then embed that into the table as inline style tags?
Is json.human.js appropriate for emails?

Add icons representing types

Consider adding icons to represent type more semantically? This will solve confusion about which type something is, without causing too much confusion for users.

Here are some ideas from the Bootstrap Glyphicons (which was on hand as some examples):

• string: icon-comment
• number: icon-calculator
• object: icon-folder-open
• array: icon-list
• true/false: icon-check
• null: icon-asterisk

Date objects are shown as [Empty Object]

to reproduce

document.querySelector('body')
    .appendChild(JsonHuman.format({now: new Date()}))

callback option to edit content

What about using JSONEditor in view mode?

This may be off-topic, but reading your motivation for json.human.js:

At Event Fabric we need to display JSON to people from all technical levels without being to technical but also without losing information about the underlying JSON object.

I was thinking you could use my jsoneditor component in view mode as well (try this example). Comes with nice coloring and expandable trees.

Just an idea...

Update bower.json

Update bower.json main to
"main":[
"./css/json.human.css",
"./src/json.human.js"
]

add option to hide zebra stripes

https://news.ycombinator.com/item?id=6380781

Option to make hyperlinks clickable, in a new window

It would be great to have an option that allows hyperlinks to be clicked and as an additional option, in a new window or a named window _blank or whatever you want. The option would be 'target'

npm

Would it be possible to host json-human on npm? npm is also for clientside libraries and would make installing easier. You would also support node users.

old jsdom version

Could you please update the jsdom version? I can't install with npm because it throws an error. Newer jsdom versions don't require contextify anymore.

Add support for multiline text

In json values, it should be possible that the output spans multiple lines

Componification of json.human.js

It would be nice to have like a HOC Component that Renders the JSON under sub components using modern framework/ui libraries such as vue, react, ember etc...

Do you think that I can be a feature of this library, or a sort of wrapper would be required to make this feasible?

Why should we import require.js ?

Why can't this lib be kept simple and stand alone ?
Can we use it without require.js?

PrettyPrint.js

Just making you all aware of prettyprint.js which basically does the same thing as this library albeit a bit more colorful. I love that there are now more options for formatting JSON into a more human readable format. Keep up the good work!

prettyprint.js: https://github.com/padolsey/prettyPrint.js

option to customize key names

unquote strings by default?

https://news.ycombinator.com/reply?id=6381359&whence=item%3fid%3d6380620

option to hide array indexes

Rails Assets component error

Hi @marianoguerra,

I tried to get json.human.js working with rails-assets but it fails with the following message.

json-human has no versions defined. Please create an issue in component's repository.

The problem is the lack of version tag. Could you please create a tag with current revision of the package using semver format? It could be 0.0.1, or anything you suggest.

Here is the component import page to check it working: https://rails-assets.org/components/new

Convert Button on Demo page broken

http://marianoguerra.github.io/json.human.js/

I clicked convert and nothing happens.

Please add export in wiki format

It would be cool to have an export in WIKI format

Reverse functionality

As an enhancement - It would be great to build an object using human readable inputs, and have it return a valid JSON object

Add button or someway to show the original json

Sometimes I need to copy the json to move it to another place. I would like to see the formatted json by default but be able to change to a view that shows me the original json.

Impossible to distinguish empty arrays from empty objects

Since the readme states that the goal is to display JSON:

without losing information about the underlying JSON object

I think it should be considered a bug that there is no way at all to distinguish an empty array ( [ ] ) from an empty object ( { } ).

option to customize boolean display