Author: | pgrabovets |
---|---|
Views Total: | 7,304 views |
Official Page: | Go to website |
Last Update: | May 26, 2020 |
License: | MIT |
Preview:

Description:
Yet another JSON viewer library that renders your JSON data as a collapsible and expandable tree structure for better readability.
How to use it:
Download and import the json-view’s files into the document.
<link rel="stylesheet" href="/path/to/dist/jsonview.bundle.css" />
The library uses Font Awesome for the collapse/expand icons.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="/path/to/dist/jsonview.bundle.js"></script>
Create a container to place the JSON viewer.
<div class="root"></div>
Format and render your JSON data in the container.
let data = '{}'; let target = '.root'; jsonView.format(data, target);
API methods.
// expand tree jsonView.expandChildren(tree); // collapse tree jsonView.collapseChildren(tree); // treverse tree object jsonView.traverseTree(tree, function(node) { console.log(node); });
Changelog:
05/26/2020
- Use scss
05/26/2020
- Bugfix
05/25/2020
- Fix false boolean value
05/23/2020
- Updated
10/09/2019
- Fix caret directions
It’s the best.
thank you
Hi pgrabovets,
I downloaded the latest code. However I am getting this error.
jsonView is not defined
this is the way i am using it:
jsonView.format(data, ‘.call-output-tree’);
what is the problem?
Thank you
Hi, first of all thank you so much for this neat javascript library. It works wonderfully!
May I suggest a feature to re-build JSON data if there’s been some edits to it (via traversing the tree?)
I’m currently trying to implement it myself but if the lib would come preloaded with this feature, may help some in the future 🙂