├── .gitignore
├── LICENSE
├── README.md
├── demo
├── example2.json
└── index.html
├── dist
└── jsonview.js
├── package.json
├── src
├── .babelrc
├── json-view.js
├── jsonview.scss
└── utils
│ ├── dom.js
│ ├── getDataType.js
│ └── traverseObject.js
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Pavel Grabovets
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # json-view
2 | This is a javascript library for displaying json data into a DOM. [link to demo](http://pgrabovets.github.io/json-view/)
3 |
4 | ### Installation
5 | ```javascript
6 | npm install '@pgrabovets/json-view';
7 | ```
8 |
9 | ### How to use
10 | include jsonview.js from dist directory in your html page
11 | ```html
12 |
13 | ```
14 | or you can use import
15 | ```javascript
16 | import jsonview from '@pgrabovets/json-view';
17 | ```
18 |
19 | get json data and render tree into DOM
20 | ```javascript
21 | // get json data
22 | const data = '{"name": "json-view","version": "1.0.0"}';
23 |
24 | // create json tree object
25 | const tree = jsonview.create(data);
26 |
27 | // render tree into dom element
28 | jsonview.render(tree, document.querySelector('.tree'));
29 |
30 | // you can render json data without creating tree
31 | const tree = jsonview.renderJSON(data, document.querySelector('.tree'));
32 | ```
33 |
34 | control methods
35 | ```javascript
36 | // expand tree
37 | jsonview.expand(tree);
38 |
39 | // collapse tree
40 | jsonview.collapse(tree);
41 |
42 | // traverse tree object
43 | jsonview.traverse(tree, function(node) {
44 | console.log(node);
45 | });
46 |
47 | // function toggles between show or hide
48 | jsonview.toggleNode(tree);
49 |
50 | // destroy and unmount json tree from the dom
51 | jsonview.destroy(tree);
52 | ```
53 |
54 | ### Example1
55 | ```html
56 |
57 |
58 |
59 | JSON VIEW
60 |
61 |
62 |
63 |
64 |
65 |
79 |
80 |
81 |
82 | ```
83 |
84 | ### Example2
85 | ```javascript
86 | import jsonview from '@pgrabovets/json-view';
87 |
88 | fetch('example2.json')
89 | .then((res)=> {
90 | return res.text();
91 | })
92 | .then((data) => {
93 | const tree = jsonview.create(data);
94 | jsonview.render(tree, document.querySelector('.root'));
95 | jsonview.expand(tree);
96 | })
97 | .catch((err) => {
98 | console.log(err);
99 | })
100 | ```
101 |
102 | ### For development install dependencies and run scripts
103 | ```
104 | $ npm install
105 |
106 | $ npm run serve
107 | $ npm run build
108 |
109 | open http://localhost:3000/
110 | ```
111 |
--------------------------------------------------------------------------------
/demo/example2.json:
--------------------------------------------------------------------------------
1 | {
2 | "givenName": "Vas",
3 | "surName": "Sudanagunta",
4 | "children": [
5 | {
6 | "givenName": "Natalia",
7 | "age": 5
8 | },
9 | {
10 | "givenName": "Aida",
11 | "age": 17
12 | }
13 | ],
14 | "address": {
15 | "state": "NY",
16 | "city": "Brooklyn",
17 | "street": "718 Marcus Garvey Ave"
18 | },
19 | "emptyObject": {},
20 | "prop-with-null": null,
21 | "prop-empty-string": ""
22 | }
23 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jsonview demo
5 |
6 |
7 |
8 |
9 |
10 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/dist/jsonview.js:
--------------------------------------------------------------------------------
1 | !function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.jsonview=n():e.jsonview=n()}(self,(()=>(()=>{"use strict";var e={767:(e,n,t)=>{t.d(n,{Z:()=>s});var r=t(81),o=t.n(r),i=t(645),a=t.n(i)()(o());a.push([e.id,'.json-container{font-family:"Open Sans";font-size:16px;background-color:#fff;color:gray;box-sizing:border-box}.json-container .line{margin:4px 0;display:flex;justify-content:flex-start}.json-container .caret-icon{width:18px;text-align:center;cursor:pointer}.json-container .empty-icon{width:18px}.json-container .json-type{margin-right:4px;margin-left:4px}.json-container .json-key{color:#444;margin-right:4px;margin-left:4px}.json-container .json-index{margin-right:4px;margin-left:4px}.json-container .json-value{margin-left:8px}.json-container .json-number{color:#f9ae58}.json-container .json-boolean{color:#ec5f66}.json-container .json-string{color:#86b25c}.json-container .json-size{margin-right:4px;margin-left:4px}.json-container .hidden{display:none}.json-container .fas{display:inline-block;border-style:solid;width:0;height:0}.json-container .fa-caret-down{border-width:6px 5px 0 5px;border-color:gray rgba(0,0,0,0)}.json-container .fa-caret-right{border-width:5px 0 5px 6px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) gray}',""]);const s=a},645:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",r=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),r&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),r&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,r,o,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(r)for(var s=0;s0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=i),t&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=t):d[2]=t),o&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=o):d[4]="".concat(o)),n.push(d))}},n}},81:e=>{e.exports=function(e){return e[1]}},379:e=>{var n=[];function t(e){for(var t=-1,r=0;r{var n={};e.exports=function(e,t){var r=function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(t)}},216:e=>{e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},565:(e,n,t)=>{e.exports=function(e){var n=t.nc;n&&e.setAttribute("nonce",n)}},795:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var n=e.insertStyleElement(e);return{update:function(t){!function(e,n,t){var r="";t.supports&&(r+="@supports (".concat(t.supports,") {")),t.media&&(r+="@media ".concat(t.media," {"));var o=void 0!==t.layer;o&&(r+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),r+=t.css,o&&(r+="}"),t.media&&(r+="}"),t.supports&&(r+="}");var i=t.sourceMap;i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),n.styleTagTransform(r,e,n.options)}(n,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},589:e=>{e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}}},n={};function t(r){var o=n[r];if(void 0!==o)return o.exports;var i=n[r]={id:r,exports:{}};return e[r](i,i.exports,t),i.exports}t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.nc=void 0;var r={};return(()=>{t.r(r),t.d(r,{collapse:()=>A,create:()=>S,default:()=>H,destroy:()=>L,expand:()=>D,render:()=>w,renderJSON:()=>k,toggleNode:()=>N,traverse:()=>C});var e=t(379),n=t.n(e),o=t(795),i=t.n(o),a=t(569),s=t.n(a),c=t(565),l=t.n(c),d=t(216),u=t.n(d),p=t(589),f=t.n(p),v=t(767),y={};function h(e){return Array.isArray(e)?"array":null===e?"null":typeof e}function m(e){return document.createElement(e)}y.styleTagTransform=f(),y.setAttributes=l(),y.insert=s().bind(null,"head"),y.domAPI=i(),y.insertStyleElement=u(),n()(v.Z,y),v.Z&&v.Z.locals&&v.Z.locals;const g={HIDDEN:"hidden",CARET_ICON:"caret-icon",CARET_RIGHT:"fa-caret-right",CARET_DOWN:"fa-caret-down",ICON:"fas"};function x(e){e.children.forEach((e=>{e.el.classList.add(g.HIDDEN),e.isExpanded&&x(e)}))}function j(e){e.children.forEach((e=>{e.el.classList.remove(g.HIDDEN),e.isExpanded&&j(e)}))}function b(e){if(e.children.length>0){const n=e.el.querySelector("."+g.ICON);n&&n.classList.replace(g.CARET_RIGHT,g.CARET_DOWN)}}function E(e){if(e.children.length>0){const n=e.el.querySelector("."+g.ICON);n&&n.classList.replace(g.CARET_DOWN,g.CARET_RIGHT)}}function N(e){e.isExpanded?(e.isExpanded=!1,E(e),x(e)):(e.isExpanded=!0,b(e),j(e))}function C(e,n){n(e),e.children.length>0&&e.children.forEach((e=>{C(e,n)}))}function T(e={}){let n=e.hasOwnProperty("value")?e.value:null;return(e=>"object"===h(e)&&0===Object.keys(e).length)(n)&&(n="{}"),{key:e.key||null,parent:e.parent||null,value:n,isExpanded:e.isExpanded||!1,type:e.type||null,children:e.children||[],el:e.el||null,depth:e.depth||0,dispose:null}}function I(e,n){if("object"==typeof e)for(let t in e){const r=T({value:e[t],key:t,depth:n.depth+1,type:h(e[t]),parent:n});n.children.push(r),I(e[t],r)}}function O(e){return"string"==typeof e?JSON.parse(e):e}function S(e){const n=O(e),t=T({value:n,key:h(n),type:h(n)});return I(n,t),t}function k(e,n){const t=S(O(e));return w(t,n),t}function w(e,n){const t=function(){const e=m("div");return e.className="json-container",e}();C(e,(function(e){e.el=function(e){let n=m("div");const t=e=>{const n=e.children.length;return"array"===e.type?`[${n}]`:"object"===e.type?`{${n}}`:null};if(e.children.length>0){n.innerHTML=function(e={}){const{key:n,size:t}=e;return`\n \n `}({key:e.key,size:t(e)});const r=n.querySelector("."+g.CARET_ICON);e.dispose=function(e,n,t){return e.addEventListener(n,t),()=>e.removeEventListener(n,t)}(r,"click",(()=>N(e)))}else n.innerHTML=function(e={}){const{key:n,value:t,type:r}=e;return`\n \n `}({key:e.key,value:""===e.value?'""':e.value,type:"{}"===e.value?"object":typeof e.value});const r=n.children[0];return null!==e.parent&&r.classList.add(g.HIDDEN),r.style="margin-left: "+18*e.depth+"px;",r}(e),t.appendChild(e.el)})),n.appendChild(t)}function D(e){C(e,(function(e){e.el.classList.remove(g.HIDDEN),e.isExpanded=!0,b(e)}))}function A(e){C(e,(function(n){n.isExpanded=!1,n.depth>e.depth&&n.el.classList.add(g.HIDDEN),E(n)}))}function L(e){var n;C(e,(e=>{e.dispose&&e.dispose()})),(n=e.el.parentNode).parentNode.removeChild(n)}const H={toggleNode:N,render:w,create:S,renderJSON:k,expand:D,collapse:A,traverse:C,destroy:L}})(),r})()));
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@pgrabovets/json-view",
3 | "version": "2.7.6",
4 | "description": "",
5 | "main": "dist/jsonview.js",
6 | "scripts": {
7 | "dev": "webpack serve",
8 | "serve": "webpack serve",
9 | "build": "webpack"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/pgrabovets/json-view.git"
14 | },
15 | "keywords": [
16 | "json"
17 | ],
18 | "author": "pavel grabovets",
19 | "license": "MIT",
20 | "devDependencies": {
21 | "css-loader": "^6.5.1",
22 | "sass": "^1.45.2",
23 | "sass-loader": "^12.4.0",
24 | "style-loader": "^3.3.1",
25 | "webpack": "^5.65.0",
26 | "webpack-cli": "^4.9.1",
27 | "webpack-dev-server": "^4.7.1"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["@babel/env", {"modules": false}]
4 | ],
5 | "comments": false
6 | }
7 |
--------------------------------------------------------------------------------
/src/json-view.js:
--------------------------------------------------------------------------------
1 | import './jsonview.scss';
2 |
3 | import getDataType from './utils/getDataType';
4 | import { listen, detach, element } from './utils/dom';
5 |
6 | const classes = {
7 | HIDDEN: 'hidden',
8 | CARET_ICON: 'caret-icon',
9 | CARET_RIGHT: 'fa-caret-right',
10 | CARET_DOWN: 'fa-caret-down',
11 | ICON: 'fas'
12 | }
13 |
14 | function expandedTemplate(params = {}) {
15 | const { key, size } = params;
16 | return `
17 |
18 |
19 |
${key}
20 |
${size}
21 |
29 |
30 |
${key}
31 |
:
32 |
${value}
33 |