JsonExplorer class

JsonExplorer

JsonExplorer allows you to render JSON objects in HTML with a **collapsible** navigation.

Signature

  1. export declare class JsonExplorer

Import

  1. import { JsonExplorer } from '@grafana/ui';

Constructors

ConstructorModifiersDescription
constructor(json, open, config, key)Constructs a new instance of the JsonExplorer class

Properties

PropertyModifiersTypeDescription
jsonany

Methods

MethodModifiersDescription
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

  1. constructor(json: any, open?: number, config?: JsonExplorerConfig, key?: string | undefined);

Parameters

ParameterTypeDescription
jsonanyThe JSON object you want to render. It has to be an object or array. Do NOT pass raw JSON string.
opennumberhis 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
configJsonExplorerConfigdefaultConfig = { 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.
keystring | undefinedThe key that this object in it’s parent context

json property

Signature

  1. json: any;

appendChildren method

Appends all the children to children element Animated option is used when user triggers this via a click

Signature

  1. appendChildren(animated?: boolean): void;

Parameters

ParameterTypeDescription
animatedboolean

Returns:

void

isNumberArray method

Signature

  1. isNumberArray(): boolean;

Returns:

boolean

openAtDepth method

Open all children up to a certain depth. Allows actions such as expand all/collapse all

Signature

  1. openAtDepth(depth?: number): void;

Parameters

ParameterTypeDescription
depthnumber

Returns:

void

removeChildren method

Removes all the children from children element Animated option is used when user triggers this via a click

Signature

  1. removeChildren(animated?: boolean): void;

Parameters

ParameterTypeDescription
animatedboolean

Returns:

void

render method

Renders an HTML element and installs event listeners

Signature

  1. render(skipRoot?: boolean): HTMLDivElement;

Parameters

ParameterTypeDescription
skipRootboolean

Returns:

HTMLDivElement

{HTMLDivElement}

renderArray method

Signature

  1. renderArray(): Element;

Returns:

Element

toggleOpen method

Toggles isOpen state

Signature

  1. toggleOpen(): void;

Returns:

void