jsonTreeViewer and jsonTree library

The library and the viewer released under the MIT license (LICENSE.txt).

jsonTreeViewer

A simple json formatter/viewer based on jsonTree library and app.js framework.

Clone with submodules (including App.js library):

git clone --recursive https://github.com/summerstyle/jsonTreeViewer.git

Online: http://summerstyle.github.io/jsonTreeViewer

1. Load json: click on "load" button and load a json-string to opened form
2. Expand/collapse single nodes by click on label (recursively - by click with pressed CTRL/META key)
3. Expand/collapse all tree nodes by click on "expand all" and "collapse all" buttons
4. Mark/unmark node labels by click on label with pressed ALT key
5. Show JSONPath of node by click on label with pressed SHIFT key

jsonTree library (JSON pretty-printer)

A simple lightweight pure-javascript library for drawing tree of json-nodes from json-object. You can get json-object from json-string by JSON.parse(str) method.

Demo: http://summerstyle.github.io/jsonTreeViewer

The library includes only 2 files - libs/jsonTree/jsonTree.js (18 KB) and libs/jsonTree/jsonTree.css (2 KB).

How to use:

html:

1<link href="libs/jsonTree/jsonTree.css" rel="stylesheet" />
2<script src="libs/jsonTree/jsonTree.js"></script>

javascript:

1// Get DOM-element for inserting json-tree
2var wrapper = document.getElementById("wrapper");
3
4// Get json-data by javascript-object
5var data = {
6    "firstName": "Jonh",
7    "lastName": "Smith",
8    "phones": [
9        "123-45-67",
10        "987-65-43"
11    ]
12};
13
14// or from a string by JSON.parse(str) method
15var dataStr = '{ "firstName": "Jonh", "lastName": "Smith", "phones": ["123-45-67", "987-65-43"]}';
16try {
17    var data = JSON.parse(dataStr);
18} catch (e) {}
19
20// Create json-tree
21var tree = jsonTree.create(data, wrapper);
22
23// Expand all (or selected) child nodes of root (optional)
24tree.expand(function(node) {
25   return node.childNodes.length < 2 || node.label === 'phoneNumbers';
26}

You can create many trees on one html-page.

The aviable methods of each json tree:

• loadData(jsonObj) - Fill new data to current json tree
• appendTo(domEl) - Appends tree to DOM-element (or move it to new place)
• expand() - Expands all tree nodes (objects or arrays) recursively
• expand(filterFunc) - Expands only selected (by filter function) child nodes of root element
• collapse() - Collapses all tree nodes (objects or arrays) recursively