Minimal JSON Data Formatter – JSONViewer

Category: Javascript | February 29, 2020
Author:LorDOniX
Views Total:19,205 views
Official Page:Go to website
Last Update:February 29, 2020
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:

02/29/2020

  • CSS update

03/19/2019

  • fixed xss vulnerability

You Might Be Interested In:


3 thoughts 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
  2. Scott Page

    Outstanding!
    No more than 5 minutes to integrate it into my app, and it’s exactly what I was looking for.
    Really great work, thanks for doing this!

    Reply

Leave a Reply