json-viewer-awesome v1.0.15

Description

This is the package for view json data in a structured and pretty way.

Installation

npm i json-viewer-awesome --save

Javascript/TypeScript

Include library

<script src="./json-viewer-awesome/lib/json-formatter.js"

Code

const jsonFormatter = new JSONFormatter.JSONFormatter({
showArrayIndex: false,
quotesOnKeys: true,
displayDataTypes: true,
displayObjectSize: true,
src: { 
        "name": "Test User", 
        "age": "12", 
        place: ["Califonia"], 
        address: { line1: "Address Line1", line2: "Address Line2", pin:[14725,2586] } 
    }
})

element.appendChild(jsonFormatter.render());

Angular Integration

Add required fonts

{
    "glob": "**/*", 
    "input": "./node_modules/json-viewer-awesome/lib/fonts", 
    "output": "assets/fonts"
} to assets area in angular.json

Import library

import { JSONFormatter } from 'json-viewer-awesome/lib/json-formatter';

Code

const formatter = new JSONFormatter({
  src: JSON.parse(jsonData), //json data to preview
  showArrayIndex: true,
  quotesOnKeys: true,
  sortKeys: false,
  displayDataTypes: true,
  displayObjectSize: true,
  collapsed: false,
  iconStyle: 0,
  theme: 'light'
})

this.rootView?.nativeElement?.appendChild(formatter.render())

Options

showArrayIndex -  boolean
quotesOnKeys -  boolean
displayDataTypes -  boolean
displayObjectSize -  boolean
src - data for preview