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

# Flatten nested structure

> Recursively flattens a nested data structure.

export const FormField = ({property, label, required = false, diType, uiPatterns, children}) => {
  const patterns = Array.isArray(uiPatterns) ? uiPatterns : uiPatterns ? [uiPatterns] : [];
  return <div style={{
    margin: '1.5rem 0'
  }}>
      <div style={{
    display: 'flex',
    alignItems: 'baseline',
    flexWrap: 'wrap',
    gap: '0.5rem',
    marginBottom: '0.25rem'
  }}>
        <strong>{label}</strong>
        <span style={{
    fontSize: '0.7rem',
    fontWeight: 600,
    textTransform: 'uppercase',
    letterSpacing: '0.04em',
    color: required ? '#6241f5' : '#6b7280'
  }}>
          {required ? 'Required' : 'Optional'}
        </span>
      </div>

      <div>{children}</div>

      {diType || patterns.length > 0 ? <p style={{
    fontSize: '0.85rem',
    color: '#6b7280',
    marginBottom: 0
  }}>
          {diType ? <>
              See the <a href={`/references/${diType}`}>{diType}</a> reference.{' '}
            </> : null}
          {patterns.length > 0 ? <>
              Accepts a <a href={`/documentation/placeholders-and-patterns/patterns#${patterns[0]}`}>pattern</a>.
            </> : null}
        </p> : null}
    </div>;
};

Turns a tree of nested items into a flat list. When your data has an item that contains child items, which in turn can contain their own children, use this to walk the whole tree and collect every item into one list. As it goes, it detaches the children from each parent, so each parent keeps only its own data and the children are lifted out alongside it.

This documentation describes: [Schema](/schemas/transformer/flatten-nested-structure)

## Fields

<FormField property="childPath" label="Child path" required uiPatterns="path">
  The path to the nested children inside each item, for example `children` or `categories`. The feature takes the items found here, removes them from their parent, and adds them to the result. It then repeats this for the children of those items, and so on, until nothing nested is left. If nothing is found at this path, the data is left unchanged.
</FormField>

## Sample data

| Field      | Value      |
| ---------- | ---------- |
| Child path | `children` |

A category that holds two child categories. After flattening, the parent (with its `children` removed) and the list of children sit alongside each other in the result.

Input:

```json theme={null}
{
    "id": "A",
    "name": "Clothing",
    "children": [
        { "id": "B", "name": "Shirts", "children": [] },
        { "id": "C", "name": "Trousers", "children": [] }
    ]
}
```

Output:

```json theme={null}
[
    { "id": "A", "name": "Clothing" },
    [
        { "id": "B", "name": "Shirts", "children": [] },
        { "id": "C", "name": "Trousers", "children": [] }
    ]
]
```

```json Configuration theme={null}
{
  "prototype": "flatten-nested-structure",
  "parameters": {
    "childPath": "children"
  }
}
```