JsonExplorer class
JsonExplorer
JsonExplorer allows you to render JSON objects in HTML with a **collapsible** navigation.
Signature
export declare class JsonExplorer
Import
import { JsonExplorer } from '@grafana/ui';
Constructors
Constructor | Modifiers | Description |
---|---|---|
constructor(json, open, config, key) | Constructs a new instance of the JsonExplorer class |
Properties
Property | Modifiers | Type | Description |
---|---|---|---|
json | any |
Methods
Method | Modifiers | Description |
---|---|---|
appendChildren(animated) | Appends all the children to children element Animated option is used when user triggers this via a click | |
isNumberArray() | ||
openAtDepth(depth) | Open all children up to a certain depth. Allows actions such as expand all/collapse all | |
removeChildren(animated) | Removes all the children from children element Animated option is used when user triggers this via a click | |
render(skipRoot) | Renders an HTML element and installs event listeners | |
renderArray() | ||
toggleOpen() | Toggles isOpen state |
constructor(json, open, config, key)
Constructs a new instance of the JsonExplorer
class
Signature
constructor(json: any, open?: number, config?: JsonExplorerConfig, key?: string | undefined);
Parameters
Parameter | Type | Description |
---|---|---|
json | any | The JSON object you want to render. It has to be an object or array. Do NOT pass raw JSON string. |
open | number | his 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 | JsonExplorerConfig | defaultConfig = { hoverPreviewEnabled: false, hoverPreviewArrayCount: 100, hoverPreviewFieldCount: 5 }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. |
key | string | undefined | The key that this object in it’s parent context |
json property
Signature
json: any;
appendChildren method
Appends all the children to children element Animated option is used when user triggers this via a click
Signature
appendChildren(animated?: boolean): void;
Parameters
Parameter | Type | Description |
---|---|---|
animated | boolean |
Returns:
void
isNumberArray method
Signature
isNumberArray(): boolean;
Returns:
boolean
openAtDepth method
Open all children up to a certain depth. Allows actions such as expand all/collapse all
Signature
openAtDepth(depth?: number): void;
Parameters
Parameter | Type | Description |
---|---|---|
depth | number |
Returns:
void
removeChildren method
Removes all the children from children element Animated option is used when user triggers this via a click
Signature
removeChildren(animated?: boolean): void;
Parameters
Parameter | Type | Description |
---|---|---|
animated | boolean |
Returns:
void
render method
Renders an HTML element and installs event listeners
Signature
render(skipRoot?: boolean): HTMLDivElement;
Parameters
Parameter | Type | Description |
---|---|---|
skipRoot | boolean |
Returns:
HTMLDivElement
{HTMLDivElement}
renderArray method
Signature
renderArray(): Element;
Returns:
Element
toggleOpen method
Toggles isOpen
state
Signature
toggleOpen(): void;
Returns:
void