Render JSON Data As A Tree View – json-view

Category: Javascript | May 26, 2020
Author: pgrabovets
Official Page: Go to website
Last Update: May 26, 2020
License: MIT

Preview:

Render JSON Data As A Tree View – json-view

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

You Might Be Interested In:


2 thoughts on “Render JSON Data As A Tree View – json-view

  1. jsonView is not defined

    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

    Reply

Leave a Reply