grafana/docs/sources/packages_api/ui/jsonexplorer.md
Marcus Andersson cc3fc18076
Docs: enable packages reference docs for 7-beta (#23953)
* added packages reference menu item.

* removed the draft flag.

* Updated docs by running script.
2020-04-28 09:53:58 +02:00

189 lines
5.1 KiB
Markdown

+++
# -----------------------------------------------------------------------
# Do not edit this file. It is automatically generated by API Documenter.
# -----------------------------------------------------------------------
title = "JsonExplorer"
keywords = ["grafana","documentation","sdk","@grafana/ui"]
type = "docs"
+++
## JsonExplorer class
JsonExplorer
JsonExplorer allows you to render JSON objects in HTML with a \*\*collapsible\*\* navigation.
<b>Signature</b>
```typescript
export declare class JsonExplorer
```
<b>Import</b>
```typescript
import { JsonExplorer } from '@grafana/ui';
```
<b>Constructors</b>
| Constructor | Modifiers | Description |
| --- | --- | --- |
| [constructor(json, open, config, key)](#constructor-jsonopenconfigkey) | | Constructs a new instance of the <code>JsonExplorer</code> class |
<b>Properties</b>
| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [json](#json-property) | | <code>any</code> | |
<b>Methods</b>
| Method | Modifiers | Description |
| --- | --- | --- |
| [appendChildren(animated)](#appendchildren-method) | | Appends all the children to children element Animated option is used when user triggers this via a click |
| [isNumberArray()](#isnumberarray-method) | | |
| [openAtDepth(depth)](#openatdepth-method) | | Open all children up to a certain depth. Allows actions such as expand all/collapse all |
| [removeChildren(animated)](#removechildren-method) | | Removes all the children from children element Animated option is used when user triggers this via a click |
| [render(skipRoot)](#render-method) | | Renders an HTML element and installs event listeners |
| [renderArray()](#renderarray-method) | | |
| [toggleOpen()](#toggleopen-method) | | Toggles <code>isOpen</code> state |
### constructor(json, open, config, key)
Constructs a new instance of the `JsonExplorer` class
<b>Signature</b>
```typescript
constructor(json: any, open?: number, config?: JsonExplorerConfig, key?: string | undefined);
```
<b>Parameters</b>
| Parameter | Type | Description |
| --- | --- | --- |
| json | <code>any</code> | The JSON object you want to render. It has to be an object or array. Do NOT pass raw JSON string. |
| open | <code>number</code> | his number indicates up to how many levels the rendered tree should expand. Set it to <code>0</code> to make the whole tree collapsed or set it to <code>Infinity</code> to expand the tree deeply |
| config | <code>JsonExplorerConfig</code> | defaultConfig = { hoverPreviewEnabled: false, hoverPreviewArrayCount: 100, hoverPreviewFieldCount: 5 }<!-- -->Available configurations: \#\#\#\#\#Hover Preview \* <code>hoverPreviewEnabled</code>: enable preview on hover \* <code>hoverPreviewArrayCount</code>: number of array items to show in preview Any array larger than this number will be shown as <code>Array[XXX]</code> where <code>XXX</code> is length of the array. \* <code>hoverPreviewFieldCount</code>: number of object properties to show for object preview. Any object with more properties that thin number will be truncated. |
| key | <code>string &#124; undefined</code> | The key that this object in it's parent context |
### json property
<b>Signature</b>
```typescript
json: any;
```
### appendChildren method
Appends all the children to children element Animated option is used when user triggers this via a click
<b>Signature</b>
```typescript
appendChildren(animated?: boolean): void;
```
<b>Parameters</b>
| Parameter | Type | Description |
| --- | --- | --- |
| animated | <code>boolean</code> | |
<b>Returns:</b>
`void`
### isNumberArray method
<b>Signature</b>
```typescript
isNumberArray(): boolean;
```
<b>Returns:</b>
`boolean`
### openAtDepth method
Open all children up to a certain depth. Allows actions such as expand all/collapse all
<b>Signature</b>
```typescript
openAtDepth(depth?: number): void;
```
<b>Parameters</b>
| Parameter | Type | Description |
| --- | --- | --- |
| depth | <code>number</code> | |
<b>Returns:</b>
`void`
### removeChildren method
Removes all the children from children element Animated option is used when user triggers this via a click
<b>Signature</b>
```typescript
removeChildren(animated?: boolean): void;
```
<b>Parameters</b>
| Parameter | Type | Description |
| --- | --- | --- |
| animated | <code>boolean</code> | |
<b>Returns:</b>
`void`
### render method
Renders an HTML element and installs event listeners
<b>Signature</b>
```typescript
render(skipRoot?: boolean): HTMLDivElement;
```
<b>Parameters</b>
| Parameter | Type | Description |
| --- | --- | --- |
| skipRoot | <code>boolean</code> | |
<b>Returns:</b>
`HTMLDivElement`
{<!-- -->HTMLDivElement<!-- -->}
### renderArray method
<b>Signature</b>
```typescript
renderArray(): Element;
```
<b>Returns:</b>
`Element`
### toggleOpen method
Toggles `isOpen` state
<b>Signature</b>
```typescript
toggleOpen(): void;
```
<b>Returns:</b>
`void`