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

# Loop Rendering

> Learn how to use YiDA's loop rendering feature, including static loop data, remote data source loops, and nested loop scenarios with configuration methods.

| **Feature** | **Free plan** | **Basic edition** | **Professional edition** | **Dedicated edition** |
| ----------- | ------------- | ----------------- | ------------------------ | --------------------- |
| Custom page | Not supported | Not supported     | Supported                | Supported             |

## 1. Overview

YiDA provides loop rendering settings for scenarios that require loop rendering.

The loop data must be an array. String arrays, number arrays, and object arrays are all supported.

## 2. Use Cases

### Scenario 1: Static Loop Data

Define a static array in **Loop data**. Inside the loop body, use `this.item` to access the current loop value and `this.index` to access the current loop index. You can also customize `item` and `index` by editing **Loop parameters** — for example, changing them to `content` and `idx`.

Enter the loop data in **Loop data**.

Form editing page.

Bind the loop variables in the required settings.

Bind variables.

The result is shown below:

### Scenario 2: Looping Remote Data Sources

Create a remote data source.

Bind the data source to the loop variable:

Then bind the values from the loop variable to the component:

Compared with Scenario 1, this scenario adds two steps: defining a remote data source, and binding the component's loop data to that data source.

The result is shown below:

### Scenario 3: Nested Loops

Suppose the remote data source returns the following data structure:

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
[
  {
    type: 'I am title one',
    detail: [
      'Content one',
      'Content two',
      'Content three'
    ]
	},
  {
    type: 'I am title one',
    detail: [
      'Content one',
      'Content two',
      'Content three'
    ]
	},
  ...
]
```

You can implement two levels of nested loops, and by extension up to N levels (N \< Infinity).

When two components work together in a nested loop, wrap them in a container component. Set the outer loop data on the container, and set the inner loop data on the inner component (in this example, the Text component).

Configure the outer layer the same way as in Scenario 2. The key point is how to configure the inner layer:

Note that the outer loop value uses `this.item`, while the inner one uses `this.content`. This is intentional (configured by editing the inner **Loop parameters**) so that the inner layer can still access the outer value. Otherwise, if both used `this.item`, the inner layer would shadow the outer one.

The result is shown below:

## 3. Notes

### 3.1 Using `this` Inside Loops

Across the entire page builder, `this` has tiered scopes. The current scope is `this`, the parent scope is `this.$super`, and the top-level scope is `this.$top`.

For example, when applying loop rendering to a form container with the form identifier `'fooForm'`, inside the **loop body**, use `this.$('fooForm').getValue()` to get the value of the current loop's form. To get the values of all looped forms, use `this.$super.$('fooForm').map(item => item.getValue())`.