Render JSON objects in HTML with a collapsible navigation.
JSON Formatter started as an AngularJS directive. This is pure JavaScript implementation of the same module.
Install via npm
npm install --save json-formatter-js
include bundle.js
and style.css
from dist
folder in your page.
import JSONFormatter from 'json-formatter-js'
const myJSON = {ans: 42};
const formatter = new JSONFormatter(myJSON);
document.body.appendChild(formatter.render());
The JSON object you want to render. It has to be an object or array. Do NOT pass raw JSON string.
Default: 1
This number indicates up to how many levels the rendered tree should expand. Set it to 0
to make the whole tree collapsed or set it to Infinity
to expand the tree deeply
Default:
{
hoverPreviewEnabled: false,
hoverPreviewArrayCount: 100,
hoverPreviewFieldCount: 5,
theme: ''
}
Available configurations:
hoverPreviewEnabled
: enable preview on hoverhoverPreviewArrayCount
: number of array items to show in preview Any array larger than this number will be shown asArray[XXX]
whereXXX
is length of the array.hoverPreviewFieldCount
: number of object properties to show for object preview. Any object with more properties that thin number will be truncated.
theme
: a string that can be any of these options:['dark']
. Look atsrc/style.less
for making new themes.
Install gulp
and run gulp serve
to start the server that serves the development version of the project.
Once:
npm test
Continues:
gulp test
gulp serve