Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pgrabovets/json-view
This is a javascript library for displaying json data into a DOM.
https://github.com/pgrabovets/json-view
Last synced: about 2 months ago
JSON representation
This is a javascript library for displaying json data into a DOM.
- Host: GitHub
- URL: https://github.com/pgrabovets/json-view
- Owner: pgrabovets
- License: mit
- Created: 2018-08-31T12:06:24.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-08T11:12:54.000Z (9 months ago)
- Last Synced: 2024-09-19T17:10:42.513Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 83 KB
- Stars: 192
- Watchers: 5
- Forks: 45
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - pgrabovets/json-view - This is a javascript library for displaying json data into a DOM. (JavaScript)
README
# json-view
This is a javascript library for displaying json data into a DOM. [link to demo](http://pgrabovets.github.io/json-view/)
### Installation
```javascript
npm install '@pgrabovets/json-view';
```
### How to use
include jsonview.js from dist directory in your html page
```html
```
or you can use import
```javascript
import jsonview from '@pgrabovets/json-view';
```
get json data and render tree into DOM
```javascript
// get json data
const data = '{"name": "json-view","version": "1.0.0"}';
// create json tree object
const tree = jsonview.create(data);
// render tree into dom element
jsonview.render(tree, document.querySelector('.tree'));
// you can render json data without creating tree
const tree = jsonview.renderJSON(data, document.querySelector('.tree'));
```
control methods
```javascript
// expand tree
jsonview.expand(tree);
// collapse tree
jsonview.collapse(tree);
// traverse tree object
jsonview.traverse(tree, function(node) {
console.log(node);
});
// function toggles between show or hide
jsonview.toggleNode(tree);
// destroy and unmount json tree from the dom
jsonview.destroy(tree);
```
### Example1
```html
JSON VIEW
fetch('example2.json')
.then((res)=> {
return res.text();
})
.then((data) => {
const tree = jsonview.create(data);
jsonview.render(tree, document.querySelector('.root'));
jsonview.expand(tree);
})
.catch((err) => {
console.log(err);
})
```
### Example2
```javascript
import jsonview from '@pgrabovets/json-view';
fetch('example2.json')
.then((res)=> {
return res.text();
})
.then((data) => {
const tree = jsonview.create(data);
jsonview.render(tree, document.querySelector('.root'));
jsonview.expand(tree);
})
.catch((err) => {
console.log(err);
})
```
### For development install dependencies and run scripts
```
$ npm install
$ npm run serve
$ npm run build
open http://localhost:3000/
```