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