Minimal JSON Data Formatter – JSONViewer

Category: Javascript | March 19, 2019
Author: LorDOniX
Views Total: 3,772
Official Page: Go to website
Last Update: March 19, 2019
License: MIT

Preview:

Minimal JSON Data Formatter – JSONViewer

Description:

A super lightweight, pure JavaScript JSON formatter / viewer which helps render JSON objects just like a collapsible tree view.

How to use it:

Load the following JS and CSS files into your html page.

<script src="json-viewer.js"></script>
<link rel="stylesheet" href="json-viewer.css">

Create an element to place the formatted JSON objects.

<div id="json"></div>

Create a new JSONViewer instance.

var jsonViewer = new JSONViewer();

Append the instance to the DIV element you just created.

document.querySelector("#json").appendChild(jsonViewer.getContainer());

Format and beautify your JSON data using the showJSON() method. Available parameters:

  • json: json Input value
  • maxLvl: Process only to max level, where 0..n, -1 unlimited
  • colAt: Collapse at level, where 0..n, -1 unlimited
jsonViewer.showJSON(json, maxLvl, colAt);

Changelog:

03/19/2019

  • fixed xss vulnerability

You Might Be Interested In:


One thought on “Minimal JSON Data Formatter – JSONViewer

  1. pulcino

    The simplest, easiest way to display of a JSON object as a tree I could find. Most other implementations rely on a particular syntax for the tree. This one is flexible, and elegant. Many thanks to Roman Makudera!

    Reply

Leave a Reply