API Reference@grafana/ui › JsonExplorer

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