Important: This documentation is about an older version. It's relevant only to the release noted, many of the features and functions have been updated or replaced. Please view the current version.
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
Was this page helpful?
Related resources from Grafana Labs
