> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Дерево JSON

> Просматривайте значения JSON с разворачиваемыми узлами и пользовательскими метками.

## Обзор

`JsonTree` отображает либо JSON `value`, либо массив именованных `entries`. Передавайте все метки пустых значений и разворачивания/сворачивания, чтобы ваше приложение управляло текстом.

**Light**

[Раскрываемые сведения о записи (light)](https://storybook.twenty.com/iframe.html?id=ui-jsonvisualizer-jsontree--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Раскрываемые сведения о записи (dark)](https://storybook.twenty.com/iframe.html?id=ui-jsonvisualizer-jsontree--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-jsonvisualizer-jsontree--display)

## Использование

```tsx theme={null}
import { JsonTree } from 'twenty-ui/components/data-display';

export const RecordDetails = () => (
  <JsonTree
    value={{ name: 'Acme', active: true, contacts: [] }}
    emptyStringLabel="Empty text"
    emptyArrayLabel="No items"
    emptyObjectLabel="No properties"
    arrowButtonCollapsedLabel="Expand node"
    arrowButtonExpandedLabel="Collapse node"
  />
);
```

Каждая запись имеет `id`, `label` и JSON `value`. Используйте записи, когда отображаемые метки отличаются от сохраненных ключей. По умолчанию разворачиваются уровни вложенности 0 и 1. Переопределите `shouldExpandNodeInitially={({ depth }) => depth === 0}`, чтобы разворачивать только корневой узел; последующим разворачиванием управляет каждый узел.

`getNodeHighlighting(keyPath)` возвращает `blue`, `red`, `partial-blue` или `undefined`. `onNodeValueClick` получает отображаемый текст: значения конечных узлов в виде строк и соответствующую метку пустого значения для пустых строк, массивов и объектов. Дерево отображает данные и не редактирует их.

Когда предоставлен `onNodeValueClick`, значения являются нативными кнопками, названными по их отображаемому тексту. Клавиша Tab перемещает фокус на значение; Enter, Space или щелчок указателем активирует его. Без обратного вызова значения остаются неинтерактивным текстом. Кнопки значений не отправляют содержащие их формы.

## Свойства

**arrowButtonCollapsedLabel** `string` *required*

Accessible label for the expand control on a collapsed node.

**arrowButtonExpandedLabel** `string` *required*

Accessible label for the collapse control on an expanded node.

**emptyArrayLabel** `string` *required*

Display text for an empty array.

**emptyObjectLabel** `string` *required*

Display text for an empty object.

**emptyStringLabel** `string` *required*

Display text for an empty string.

**entries** `JsonTreeEntry[]`

Named entries with stable id, label, and JSON value fields. Supply entries or value, not both.

**getNodeHighlighting** `GetJsonNodeHighlighting`

Returns blue, red, or partial-blue highlighting for a node key path.

**onNodeValueClick** `((valueAsString: string) =\> void)`

Called with the clicked value as displayed: leaf values as strings, and the empty label for empty strings, arrays, and objects.

**shouldExpandNodeInitially** `((params: ShouldExpandNodeInitiallyProps) =\> boolean)` (default: (\{ depth }: ShouldExpandNodeInitiallyProps) =>
depth \<= 1)

Chooses initial expansion from the node keyPath and depth. The default expands the first two depths.

**value** `JsonValue`

JSON value to display. Supply value or entries, not both.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.