Loop

The Loop component lets you easily repeat a layout based on dynamic data.

When creating a Loop, first give it a title. This title becomes a variable that expects an array of objects in the payload. The Loop repeats your layout according to the number of items in this array.

Example:

If your layout is:

Your payload should look like this:

{
    "loop_title":[
        {"name": "John Doe", "picture_src":"https://img.here"},
        {"name": "Sophie Lorem", "picture_src":"https://img.here"}
    ]
}

This results in your layout repeating twice:

Stacking loops

You can also create nested loops by stacking them. This allows for more complex data structures.

Example of a nested layout:

Expected payload for nested loops:

{
    "loop_title":[
        {"name": "John Doe", "picture_src":"https://img.here", "characteristics":["characteristics1", "characteristics2", "characteristics3"]},
        {"name": "Sophie Lorem", "picture_src":"https://img.here", "characteristics":["characteristics1", "characteristics2", "characteristics3"]}
    ]
}

Resulting on this final result: