A jQuery plugin for viewing JSON in a web browser.
npm:
$ npm i -S lazy-json-viewer
bower:
$ bower install lazy-json-viewer -S
Include jQuery, the stylesheet, and the script file in the page. Add an element to hold the json viewer.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="lazyjsonviewer.css" rel="stylesheet" />
<script src="lazyjsonviewer.js"></script>
<div id="json"></div>
Call jsonViewer()
on your jQuery object, passing the data object that you want to visualize.
var obj = {
aString: "Hello world!",
aNumber: 42,
aBoolean: true,
anArray: [5, 6, 7, 8],
anObject: {
aSubProperty: "value"
}
};
$("#json").jsonViewer(obj);
This package comes with a default stylesheet, but you can override its styles in your own stylesheet, or completely replace it.
.lazy-json-viewer
- The root element which is appended to your target element has this class..*-value
- Each element containing a value is given a class name consisting of its type, followed by-value
. Eg:.null-value
,.array-value
,.object-value
,.string-value
,.number-value
,.boolean-value
. The html contains only the raw value. Quotes and brackets are added with css:
.lazy-json-viewer .array-value > ::before { content: "["; }
.lazy-json-viewer .array-value > ::after { content: "]"; }
.value-summary
- This is a child element of.object-value
or.array-value
that contains the value that is displayed while collapsed (either the length of the array, or the number of properties in the object)..content
- This is a child element of.object-value
or.array-value
that contains the full expanded value..property
- This is a child element of.content
that contains information about a single Object property or Array element..property-name
- This is a child element of.property
that contains the property name or array index. It is followed by a.*-value
sibling element (see above)..json-expander
- This class is added to.property-name
elements for expandable properties (non-empty objects and arrays, and multiline strings). It adds a clickable indicator (via::before
) to expand and collapse the property value..expand-all
- This is a child element of.json-expander
that is present when the property's expanded contains expandable properties. It displays clickable "expand all" text (via::before
) that is visible on hover. Clicking will expand all descendent values, recursively. To disable expand-all functionality, you may hide this element in your CSS..collapsed
- This class is added to.property
elements to hide the.value-summary
and show the.content
..multiline
- This class is added to.string-value
elements when the value contains a line break..contains-quote
- This class is added to.string-value
elements when the value contains a double quote character (and does not contain a backtick character).