Beautiful JSON Rendering In Pure JavaScript – JSON Formatter

Category: Javascript , Recommended , Text | May 27, 2022
Author:mohsen1
Views Total:3,879 views
Official Page:Go to website
Last Update:May 27, 2022
License:MIT

Preview:

Beautiful JSON Rendering In Pure JavaScript – JSON Formatter

Description:

JSON Formatter is a pure JavaScript plugin used for rending local JSON objects and/or external JSON files in an elegant way (just like the collapsible tree structure).

How to use it:

Install the JSON Formatter via NPM.

npm install --save json-formatter-js
import JSONFormatter from 'json-formatter-js'

Or directly include the JavaScript in your HTML document.

<script src="dist/json-formatter.umd.js"></script>

Create a new JSONFormatter object with the following parameters:

  • json: json object or array
  • open: indicates how many levels the rendered tree should expand
  • config: configuration options
JSONFormatter(json, open, config)

All default configuration options.

{
  hoverPreviewEnabled: false,
  hoverPreviewArrayCount: 100,
  hoverPreviewFieldCount: 5,
  animateOpen: true,
  animateClose: true,
  theme: null, // or 'dark'
  useToJSON: true, // use the toJSON method to render an object as a string as available
  maxArrayItems: 100,
  exposePath: false
};

Open a specific depth.

const formatter = new Formatter();
formatter.openAtDepth(1);

Changelog:

v2.4.0 (05/27/2022)

  • Allow users to choose to expose path

v2.3.4 (03/05/2020)

  • Update

v2.3.3 (02/07/2020)

  • Fix bug that assign undefined to empty keys

v2.2.1 (09/20/2018)

  • Bugfix & add more options

You Might Be Interested In:


3 thoughts on “Beautiful JSON Rendering In Pure JavaScript – JSON Formatter

  1. Athaphian

    Doing exactly what this article states results in:

    json-formatter.js:1 Uncaught ReferenceError: module is not defined
    Uncaught ReferenceError: JSONFormatter is not defined

    Reply

Leave a Reply