json-browse
json-browse is a jQuery plugin to easily browse and highlight your JSON.
- Syntax highlighting
- Collapse and expand child nodes on click
- Clickable links
- Easily readable and minimal DOM structure
Usage
Import jquery.json-browse.js
and jquery.json-browse.css
in your application.
Then just call the jsonBrowse()
method passing in an object:
<pre id="json-renderer" class="json-body"></pre>
var data = { "foobar": "foobaz" }; $('#json-renderer').jsonBrowse(data);
Options
The jsonBrowse
method accepts an optional options
hash as a second argument:
Option | Type | Default | Description |
---|---|---|---|
collapsed | boolean | false | All nodes are collapsed. |
withQuotes | boolean | false | All JSON keys are surrounded with double quotation marks |
Example:
$('#json-renderer').jsonBrowse(data, {collapsed: true, withQuotes: true});