# Traverse

A `traverse` flow allows a block of code to be executed once for each item in an array, and then for subsequent arrays contained within a specified key, if any. The order of iteration is guaranteed because iteration happens over sourced arrays. 

The `traverse` flow loops through nested data recursively, flattening the output. Basic usage of the `traverse` tag is as follows:

### Syntax

Basic syntax of `traverse` flow is as follows:

```swift
{[ traverse [key] into [value] source [source] ]}
    {{ value }}
{[/]}
```

With the following required attributes:

* `key` - key of the iterated value within the current context
* `value` - the newly created property where iteration data is stored 
* `source` - The source array

A `traverse` flow can be used to flatten nested structures, such as components. Components in Supernova are represented as a tree - parent components such as `views` can contain many other components (their children). This can go into unlimited depth.

In order to list all components in a hierarchy, iteration needs not only to go through the source array but also dive into all its descendants (children of the root view) and do that for unlimited depth. 

Let's assume we have a variable `componentTree` defined that contains the following data (a simplified version of Supernova component data model):

```javascript
"componentTree": {
    "name": "Container",
    "frame": "100, 100, 100, 100",
    "components": [{
        "name": "Subview 1",
        "frame": "0, 0, 50, 50",
        "components": []
    }, {
        "name": "Subview 2",
        "frame": "50, 50, 50, 50",
        "components": [{
            "name": "Sub-sub view 1",
            "frame": "0, 0, 50, 50",
            "components": []
        }]
    }]
}
```

The `componentTree` contains 4 views spread over 3 levels of depth. We can use `traverse` flow to allow for this nested iteration:

```
{[ traverse components into component source componentTree ]}
    {{ shape.name }}
{[/]}
```

The blueprint takes `componentTree` - the source dictionary as the first item of iteration and then checks for `components` key, expecting an array. If an array is encountered, the iteration continues within that leaf of the tree. The generated result will then look like this:

```
  Container
  Subview 1
  Subview 2
  Sub-sub view 1
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://supernova-developers.gitbook.io/supernova-dsm/pulsar-language/flows/traverse.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.