Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A simple way to inspect JSON
branch: master
Failed to load latest commit information.
etc why was this image broken
examples
lib fix reference to path attribute
test allow non-json contents in initial element
.gitignore ignore .DS_Store
Gruntfile.js setup basic grunt workflow
LICENSE.md update license information
README.md improve methods documentation
inspector-json.css setup basic grunt workflow
inspector-json.js fix reference to path attribute
package.json add testling config

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.

Something went wrong with that request. Please try again.