A JavaScript library that enables efficient working with large JSON data in the browser.
The JSON data is held as ArrayBuffer and only parsed for structural information.
Information about the top level nodes is provided. Pagination enabled browsing of arrays and objects.
No dependencies, works directly on the DOM API. Runs in any modern browser and IE11.
npm install big-json-viewer
test.ts
import { BigJsonViewerDom } from 'big-json-viewer';
BigJsonViewerDom.fromData(JSON.stringify({ test: 23 })).then((viewer) => {
const node = viewer.getRootElement();
document.body.appendChild(node);
node.openAll(1);
});index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<link rel="stylesheet" href="./node_modules/big-json-viewer/styles/default.css" />
</head>
<body>
<script src="src/test.ts"></script>
</body>
</html>Example run with parcel (npm install -D parcel-bundler);
parcel index.html
See examples/basic/index.html for plain javascript example.
See docs-src/demo.ts for a more advanced example.
You can use the following static method to get a new viewer instance:
import { BigJsonViewerDom, BigJsonViewerOptions } from 'big-json-viewer';
BigJsonViewerDom.fromData(data: ArrayBuffer | string, options?: BigJsonViewerOptions): Promise<BigJsonViewerDom>It returns a BigJsonViewerDom instance. Call getRootElement() on it to get a JsonNodeElement, that is an HTMLDivElement with some extras. You can insert it anywhere in your DOM.
When calling fromData, you can provide an object matching the interface BigJsonViewerOptions.
Example:
{
objectNodesLimit: 50, // how many properties of an object should be shows before it gets paginatated with a pagination size of 50
arrayNodesLimit: 50, // same as objectNodesLimit, but with array elements
labelAsPath: false, // if true the label for every node will show the full path to the element
linkLabelCopyPath: 'Copy path', // label for the copy path button in case of translation
linkLabelExpandAll: 'Expand all', // label for the expand all button in case of translation
collapseSameValue: 5, // if an array repeats the same value for this amount of times they will be collapsed
showExtendedJson: false, // if true, extended JSON types like $date, $oid, $binary, etc. will be shown with their type
maxStringPreviewLength: 250, // maximum length of string preview before it gets truncated with "..."
}Initilizes a new viewer with JSON encoded data
fromObject(data: string | object | null | number | boolean, options?: BigJsonViewerOptions): Promise<BigJsonViewerDom>
Initializes a new viewer with JavaScript data
Returns the JsonNodeElement that can be appended to the DOM.
Call this to free resources. It will terminate any by the instance started worker.
openBySearch(pattern: RegExp, openLimit?: number, searchArea?: TreeSearchAreaOption): TreeSearchCursor;
Searches the tree by the specified pattern and searchArea. Returns a TreeSearchCursor, which contains all matches and methods to jump the focus between the matches.
openLimitis1by default. But can beInfinityor any number.searchAreadescribes where the pattern should be searched. Has the following options:'all'search in keys and values (default)'keys'search only in keys'values'search only in values
Opens the node in case it is an openable node. No event is fired.
Closes the node in case it is open. No event is fired.
Toggles the open state of the node. Either opens or closes it. No event is fired.
Opens the specified path and returns the opened node, in case it was found.
Opens all nodes until the defined depth. Returns the number of opened nodes.
maxDepthisInfinityby defaultpaginatedis a string of the following options'first'open only the first pagination stub (default)'all'open all pagination stubs'none'open no pagination stubs
Returns a list of opened paths.
withStubs is true by default. It makes sure, that paginated stubs that are opened are considered.
When you have a limit of 50 nodes and you open the second stub [50 ... 99], a path it retuned that contains the name of the first node in the stub.
The following events are being fired on the visible DOM elements. The events bubble up, so you just need a listener to your root element.
Fires when a node is being opened by the user directly with a click. The target is a JsonNodeElement.
Example logs the opened path:
rootNode.addEventListener('openNode', function (e) {
console.log('openNode', e.target.jsonNode.path);
});Fires when a node is being closed. The target is a JsonNodeElement.
Fires when multiple nodes have been opened. Target is the top level JsonNodeElement that was used to trigger the action. E.g. when the user clicks the Expand all link.
Fires when a pagination stub is being opened directly by the user with a click. The target is a JsonNodesStubElement.
Fires when a pagination stub is being closed. The target is a JsonNodesStubElement.
Fires when the user clicks on the Copy Path link of a node.
Anyone is welcome to contribute. See CONTRIBUTING.md for more information.
- Improve display of large strings.
- Support JSON Schema. If provided show meta information from the schema definition.