https://github.com/marianoguerra/json.human.js

Convert JSON to human readable HTML
https://github.com/marianoguerra/json.human.js

Last synced: about 2 months ago
JSON representation

Convert JSON to human readable HTML

• Host: GitHub
• URL: https://github.com/marianoguerra/json.human.js
• Owner: marianoguerra
• Created: 2013-09-13T13:46:43.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2019-04-13T13:19:53.000Z (over 5 years ago)
• Last Synced: 2024-04-06T16:33:03.891Z (6 months ago)
• Language: JavaScript
• Homepage: http://marianoguerra.github.io/json.human.js/
• Size: 70.3 KB
• Stars: 973
• Watchers: 30
• Forks: 79
• Open Issues: 15
• Metadata Files:
  • Readme: README.rst

Awesome Lists containing this project

README

        
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  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 `_