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 { BigJsonViewer } from 'big-json-viewer';
document.body.appendChild(
BigJsonViewer.elementFromData(
JSON.stringify({
test: 23,
someArray: [45, 2, 5, true, false, null]
})
)
);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 parce-bundler);
parcel index.html
You want to use the static method to display a JSON.
BigJsonViewer.elementFromData(data: ArrayBuffer | string, options?: BigJsonViewerOptions): JsonNodeElementIt returns a JsonNodeElement object, that is an HTMLDivElement with some extras. You can insert it anywhere in your DOM.
When calling elementFromData, 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
}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.
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
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:
rootNode1.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.
- Fix highlight all on search and not only the first
- Improve display of large strings.
- Run the parser in a WebWorker
- Support JSON Schema. If provided show meta information from the schema definition.