🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Yet another JSON viewer jQuery plugin which presents your JSON data in a more readable, expandable tree structure with syntax highlighting support.

JSON-viewer

Documentation

json-browse

npm version Dependency Status Licence

NPM

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

demo page!

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

You May Also Like