You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

json-tree-viewer

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

json-tree-viewer

json formatter/viewer/pretty-printer (with jsonTree javascript-library)


Version published
Weekly downloads
308
decreased by-6.1%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

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:

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

javascript:

// Get DOM-element for inserting json-tree
var wrapper = document.getElementById("wrapper");

// Get json-data by javascript-object
var data = {
    "firstName": "Jonh",
    "lastName": "Smith",
    "phones": [
        "123-45-67",
        "987-65-43"
    ]
};

// or from a string by JSON.parse(str) method
var dataStr = '{ "firstName": "Jonh", "lastName": "Smith", "phones": ["123-45-67", "987-65-43"]}';
try {
    var data = JSON.parse(dataStr);
} catch (e) {}

// Create json-tree
var tree = jsonTree.create(data, wrapper);

// Expand all (or selected) child nodes of root (optional)
tree.expand(function(node) {
   return node.childNodes.length < 2 || node.label === 'phoneNumbers';
}

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

Keywords

FAQs

Package last updated on 24 Mar 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc