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 <http://event-fabric.com/>_ 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 <http://marianoguerra.github.io/json.human.js>_
::
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 <https://github.com/bower/bower>_ you
can just run::
bower install json-human --save
Alternatives
- prettyprint.js: https://github.com/padolsey/prettyPrint.js
License?
MIT <http://opensource.org/licenses/MIT>_