Registry / devops / json-tree-viewer

json-tree-viewer

JSON →
library0.0.2jsnpmunverified

jsonTreeViewer is a lightweight, pure-JavaScript library and viewer for rendering JSON data as an interactive collapsible tree. Version 0.0.2 (no longer actively maintained) provides a simple way to visualize JSON objects in the browser with expand/collapse, JSONPath display, and node marking. It depends on no external frameworks and consists of just a JS and CSS file. Compared to alternatives like react-json-tree or jqTree, it is minimal, self-contained, and works in any JavaScript environment.

devops
npm install json-tree-viewer
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · JSON-TREE-VIEWER
J
json-tree-viewer
devopsjavascriptv0.0.2
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

jsonTree
✓ const tree = jsonTree.create(data, wrapper);
✗ import jsonTree from 'json-tree-viewer';
jsonTree is a global object from the script, not an npm module. Use a script tag or copy the files locally.
jsonTree.create
✓ jsonTree.create(data, domElement)
✗ jsonTree.create(data) // missing second argument
The second parameter is required: the DOM element where the tree will be inserted.
jsonTree.loadData
✓ tree.loadData(newData);
✗ jsonTree.loadData(newData); // not a static method
loadData is an instance method, not static.

Shows how to include the library via script tags, create a tree from a JavaScript object, and expand all nodes.

<link href="jsonTree.css" rel="stylesheet" /> <script src="jsonTree.js"></script> <script> var wrapper = document.getElementById('tree'); var data = { "name": "John", "age": 30, "pets": ["cat", "dog"], "address": { "city": "NYC", "zip": 10001 } }; var tree = jsonTree.create(data, wrapper); tree.expand(); </script>
Debug
Known issues
gotchajsonTree expects a JavaScript object, not a JSON string. Call JSON.parse() first.
fix
var data = JSON.parse(jsonString); jsonTree.create(data, wrapper);
affects: >=0.0.1
gotchaThe DOM element passed to create() must already be in the document. Appending to a detached element may cause issues.
fix
Ensure the wrapper is appended to the DOM before calling create().
affects: >=0.0.1
deprecatedThe project is no longer actively maintained. Newer alternatives like react-json-tree or vega-embed are recommended.
fix
Consider migrating to a maintained library.
affects: >=0.0.1
Errors
Common errors & fixes
Uncaught TypeError: jsonTree.create is not a function
jsonTree script not loaded or loaded after usage
fix
Ensure <script src="path/to/jsonTree.js"></script> is placed before any code that calls jsonTree.create().
Uncaught TypeError: Cannot read property 'create' of undefined
jsonTree is missing (file not found or blocked)
fix
Check the path to jsonTree.js; if using npm, copy the files from node_modules/json-tree-viewer/libs/jsonTree/ to your project.
Expected a DOM element as second argument
Second argument to create() is missing or not a DOM element
fix
jsonTree.create(data, document.getElementById('tree'));
Upgrade
Version history
0.0.2latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
5 hits · last 30 days
node
4
Resources
githubhttps://github.com/summerstyle/jsonTreeViewer ↗
packagejson-tree-viewer ↗
homepagehttps://github.com/arseneoaa/jsonTreeViewer#readme ↗
json-tree-viewer — npm install json-tree-viewer · libregistry