A simple way to inspect JSON
JavaScript CSS
Latest commit e6bec9f Jul 8, 2014 @josiahsprague josiahsprague Merge pull request #8 from SparkartGroupInc/fix-collapse-storage
fix reference to path attribute
Permalink
Failed to load latest commit information.
etc
examples
lib fix reference to path attribute Jul 8, 2014
test
.gitignore
Gruntfile.js
LICENSE.md
README.md
inspector-json.css
inspector-json.js fix reference to path attribute Jul 8, 2014
package.json add testling config Oct 28, 2013

README.md

Inspector JSON

Explore JSON in style.

Screenshot

Inspector JSON is a javascript library for creating "inspectable" representations of JSON, much like the inspection features in web browsers like Google Chrome, Firefox, and Opera. It allows you to collapse/expand arrays and objects, and can even remember the state of the inspector between pageloads.

browser support

Usage

NOTE: You must include inspector_json.css for the inspector to be properly styled.

The inspector is started by creating a new InspectorJSON instance. If you pass the json option, or the element provided has a JSON string inside of it, Inspector JSON will automatically render that JSON.

var inspector = new InspectorJSON({
    element: 'json',
    json: '{"hello":"world"}'
});

You may also render new JSON at any time by using the view method:

inspector.view('{"new":true}');

Inspector JSON can be used as a standalone script, with Browserify, or with RequireJS.

Configuration

Inspector JSON has a few configuration options, all of which are set in a configuration object passed when the inspector is instantiated. The options are as follows:

Option Type Default Purpose
element String or Element null The element the inspector should be rendered in. This must either be the ID of an element, or the element reference itself.
json String or Object null The JSON for the inspector to render. This must either be a valid JSON string, or an object representing valid JSON.
collapsed Boolean true Whether or not the tree will start collapsed
url String location.pathname The URL to be used for remembering the inspector's collapse state. By default this uses the page's current URL
var inspector = new InspectorJSON({
    element: 'json',
    json: '{"hello":"world"}',
    collapsed: false,
    url: '/json/inspector/'
});

Methods

Inspector JSON only makes two methods available at the moment:

inspector.view( json )

Views the JSON string/object passed.

inspector.view('{"string":"Hello World!","number":5,"boolean":true,"array":["one","two","three"],"object":{"key":"value","key2":"value2"}}');

inspector.view({hello:'world'});

inspector.destroy()

Destroys the inspector.

inspector.destroy();

License

Inspector JSON is available under the MIT License.