lazy-json-viewer

A jQuery plugin for viewing JSON in a web browser.

Demo

gilly3.com/ljv

Get it

npm:

$ npm i -S lazy-json-viewer

bower:

$ bower install lazy-json-viewer -S

Usage

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);

Customize

This package comes with a default stylesheet, but you can override its styles in your own stylesheet, or completely replace it.

Classes

• .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).