Searchable And Collapsible JSON Viewer With jQuery - jsonbrowser.js

jsonbrowser.js is a simple jQuery based JSON viewer that renders your JSON data into a searchable, collapsible, expandable tree structure for better user experience.

How to use it:

1. Create the html for the JSON viewer.

<div id="browser" class="jsonbrowser"></div>

2. Include both jQuery library and the jsonbrowser.js script at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="src/jquery.jsonbrowser.js"></script>

3. Prepare your JSON data.

var myJSON = []

4. Initialize the JSON viewer with default options.

$('#browser').jsonbrowser(myJSON);

5. The basic CSS styles for the JSON viewer.

.jsonbrowser ul {
  margin : 0;
  padding : 0;
  list-style-type : none;
}

.jsonbrowser ul ul { padding-left : 20px; }

.jsonbrowser li {
  margin : 0;
  padding : 2px 0;
}

.jsonbrowser li.collapsible > .key {
  cursor : pointer;
  text-decoration : underline;
}

.jsonbrowser ul.collapsed { display : none; }

.jsonbrowser .key {
  font-size : 15px;
  font-weight : bold;
}

.jsonbrowser .value {
  font-family : "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
  font-size : 12px;
}

.jsonbrowser .empty-value { font-style : italic; }

.jsonbrowser a { color : #111; }

6. Plugin's default options.

$('#browser').jsonbrowser({

  // custom URI scheme
  'scheme'      : 'http',

  // parse and link URLs
  'parseURLs'   : true,

  // allows to collapse and expand nodes
  'collapsible' : true,

  // collapsed by default
  'collapsed'   : false

});

7. Public methods.

// collpase all 
$.jsonbrowser.collapseAll('#browser');

// expand all
$.jsonbrowser.expandAll('#browser');

8. Public methods.

// collpase all 
$.jsonbrowser.collapseAll('#browser');

// expand all
$.jsonbrowser.expandAll('#browser');

// search nodes by either keys or values
$.jsonbrowser.search('#browser', $(this).val());

---

This awesome jQuery plugin is developed by bigwhoop. For more Advanced Usages, please check the demo page or visit the official website.