Package Exports

@web-comp/json-viewer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@web-comp/json-viewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

JSON Viewer

Collapsible JSON viewer in tree format with console like UI.

Installation:

npm install @web-comp/core
npm install @web-comp/json-viewer

json viewer depends on @web-comp/core to work.

Usage:

import '@web-comp/core';
import '@web-comp/json-viewer';

template:

<div> // container div
    <wc-json-viewer id="myjson"></wc-json-viewer>
</div>

JS -

const element = document.getElementById("myjson");
const jsonData = {name: 'sudobird', ........};      // json array or object
element.setConfig({data: jsonData});

Example:

const jsonData = {
    name: "sudobird",
    age: 99,
    cities: ['abc', 'def', 'ghi'],
    gender: 'M',
    car: null,
    pan: 'BBGHGJ8485',
    isActive: false,
    jobs: [
        {title: 'Software Engineer', city: 'abc'},
        {title: 'Consultant', city: 'def'},
    ]
}

Usage with Angular:

npm install @web-comp/core @web-comp/json-viewer
set schemas: [CUSTOM_ELEMENTS_SCHEMA] in the module.
import core module and json-viewer module.

import '@web-comp/core';
import '@web-comp/json-viewer';

 <wc-json-viewer #jsonview></wc-json-viewer>

@ViewChild('jsonview') jsonview;
....
const jsonData = {....} // your json
this.jsonview.nativeElement.setConfig({data: jsonData});

Usage with React:

Install and import modules (core and json viewer)

import '@web-comp/core';
import '@web-comp/json-viewer';


<wc-json-viewer ref="jsonRef"></wc-json-viewer>

// in JS
componentDidMount() {
    this.jsonRef.current.setConfig({data: <jsonObj>});
}