json-formatter-js

WebJar for json-formatter-js

License	MIT
Categories	JavaScript Languages JSON Data ORM
GroupId	org.webjars.bower
ArtifactId	json-formatter-js
Last Version	2.2.1
Release Date	Aug 26, 2019
Type	jar
Description	json-formatter-js WebJar for json-formatter-js
Project URL	http://webjars.org
Source Code Management	https://github.com/mohsen1/json-formatter-js

Download json-formatter-js

Filename	Size
json-formatter-js-2.2.1.pom
json-formatter-js-2.2.1.jar	72 KB
json-formatter-js-2.2.1-sources.jar	22 bytes
json-formatter-js-2.2.1-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/json-formatter-js/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>json-formatter-js</artifactId>
    <version>2.2.1</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/json-formatter-js/
implementation 'org.webjars.bower:json-formatter-js:2.2.1'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/json-formatter-js/
implementation ("org.webjars.bower:json-formatter-js:2.2.1")

Apache Buildr

'org.webjars.bower:json-formatter-js:jar:2.2.1'

Apache Ivy

<dependency org="org.webjars.bower" name="json-formatter-js" rev="2.2.1">
  <artifact name="json-formatter-js" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='json-formatter-js', version='2.2.1')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "json-formatter-js" % "2.2.1"

Leiningen

[org.webjars.bower/json-formatter-js "2.2.1"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

JSON Formatter

Render JSON objects in HTML with a collapsible navigation.

JSON Formatter started as an AngularJS directive. This is pure JavaScript implementation of the same module.

Live Demo

Usage

Install via npm

npm install --save json-formatter-js

include json-formatter.js from dist folder in your page.

import JSONFormatter from 'json-formatter-js'

const myJSON = {ans: 42};

const formatter = new JSONFormatter(myJSON);

document.body.appendChild(formatter.render());

API

JSONFormatter(json [, open [, config] ])

json (Object) - required

The JSON object you want to render. It has to be an object or array. Do NOT pass raw JSON string.

open (Number)

Default: 1 This number indicates up to how many levels the rendered tree should expand. Set it to 0 to make the whole tree collapsed or set it to Infinity to expand the tree deeply

config (Object)

Default:

{
  hoverPreviewEnabled: false,
  hoverPreviewArrayCount: 100,
  hoverPreviewFieldCount: 5,
  theme: '',
  animateOpen: true,
  animateClose: true,
  useToJSON: true
}

Available configurations:

Hover Preview

• hoverPreviewEnabled: enable preview on hover.
• hoverPreviewArrayCount: number of array items to show in preview Any array larger than this number will be shown as Array[XXX] where XXX is length of the array.
• hoverPreviewFieldCount: number of object properties to show for object preview. Any object with more properties that thin number will be truncated.

Theme

• theme: a string that can be any of these options: ['dark']. Look at src/style.less for making new themes.

Animation

• animateOpen: enable animation when expanding json object. True by default.
• animateClose: enable animation when closing json object. True by default.

Rendering Options

• useToJSON: use the toJSON method to render an object as a string as available. Usefull for objects like Date or Mongo's ObjectID that migh make more sense as a strign than as empty objects. True by default.

• sortPropertiesBy: use the given sorting function to deeply sort the object properties.

openAtDepth([depth])

const formatter = new Formatter({ ... });
document.body.appendChild(formatter.render());
formatter.openAtDepth(3);

depth (Number)

Default: 1 This number indicates up to how many levels the rendered tree should open. It allows use cases such as collapse all levels (with value 0) or expand all levels (with value Infinity).

Development

Install the dependencies:

npm install

Run the dev server

npm start

Running tests

Once:

npm test

License

MIT

Versions

Version
2.2.1 Aug 26, 2019
2.2.0 Jul 10, 2017
1.3.0 Feb 9, 2017
1.2.0 Nov 12, 2016
0.3.0 Dec 1, 2015