> ## 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.

# Arbore JSON

> Explorați valorile JSON cu noduri extensibile și etichete personalizate.

## Prezentare generală

`JsonTree` afișează fie o `value` JSON, fie o matrice de `entries` denumite. Furnizați toate etichetele pentru valori goale și extindere/restrângere, astfel încât aplicația dvs. să controleze textul.

**Light**

[Detalii extensibile ale înregistrării (light)](https://storybook.twenty.com/iframe.html?id=ui-jsonvisualizer-jsontree--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Detalii extensibile ale înregistrării (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)

## Utilizare

```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"
  />
);
```

Fiecare intrare are un `id`, o `label` și o `value` JSON. Utilizați intrări atunci când etichetele afișate diferă de cheile stocate. În mod implicit, sunt extinse nivelurile de adâncime 0 și 1. Suprascrieți `shouldExpandNodeInitially={({ depth }) => depth === 0}` pentru a extinde numai rădăcina; extinderea ulterioară este gestionată de fiecare nod.

`getNodeHighlighting(keyPath)` returnează `blue`, `red`, `partial-blue` sau `undefined`. `onNodeValueClick` primește textul afișat: valorile frunză ca șiruri și eticheta corespunzătoare pentru valori goale, pentru șiruri, matrice și obiecte goale. Arborele afișează datele și nu le editează.

Când este furnizat `onNodeValueClick`, valorile sunt butoane native denumite după textul lor afișat. Tab mută focalizarea la o valoare; Enter, Spațiu sau un clic cu un dispozitiv de indicare o activează. Fără callback, valorile rămân text neinteractiv. Butoanele pentru valori nu trimit formularele care le conțin.

## Proprietăți

**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.