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
- Load json: click on "load" button and load a json-string to opened form
- Expand/collapse single nodes by click on label (recursively - by click with pressed
CTRL
/META
key) - Expand/collapse all tree nodes by click on "expand all" and "collapse all" buttons
- Mark/unmark node labels by click on label with pressed
ALT
key - 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:
javascript:
// Get DOM-element for inserting json-treevar wrapper = document; // Get json-data by javascript-objectvar data = "firstName": "Jonh" "lastName": "Smith" "phones": "123-45-67" "987-65-43" ; // or from a string by JSON.parse(str) methodvar dataStr = '{ "firstName": "Jonh", "lastName": "Smith", "phones": ["123-45-67", "987-65-43"]}';try var data = JSON; catch e {} // Create json-treevar tree = jsonTree; // Expand all (or selected) child nodes of root (optional)tree
You can create many trees on one html-page.
The aviable methods of each json tree:
loadData(jsonObj)
- Fill new data to current json treeappendTo(domEl)
- Appends tree to DOM-element (or move it to new place)expand()
- Expands all tree nodes (objects or arrays) recursivelyexpand(filterFunc)
- Expands only selected (by filter function) child nodes of root elementcollapse()
- Collapses all tree nodes (objects or arrays) recursively