Comment on page

Repeating Elements

Repeat an element (eg. Row, Column, etc.) for each item in a list of data.

Basics
Rows, Columns, and Text elements can be repeated for each item in a list of data. This is useful when you have a variable number of items that you want to display. For example, if you are creating an invoice and you want to display all of the products of the order you can repeat the Row element for each product.
Row elements repeat vertically and Column elements repeat horizontally.
​
To repeat an element, select the element then click the "Edit Logic" button in the properties panel.
When the Logic Editor opens, select the Repeat/Loop tab, add the name of the variable in your data that you want to repeat the element for then click "Save"
Now, the selected element will repeat for each item in the items list.
Context
If the data that we've told Documint to repeat the element for is a Collection (list/Array of Objects), then any variables added inside of the repeated element will be within the context of that item. If the data that we're repeating on is a list/Array of Strings, Numbers or Boolean values then we can display that value using the {{this}} variable.
Example 1: Repeating for a list of Strings​
In this example, we're repeating the Text element for each movie. Because the list of movies is an Array of Strings we use the {{this}} variable to display its value.
​
Template
Data
Result
{
    "movies":[ 
        "Cast Away", 
        "Toy Story", 
        "Million Dollar Baby" 
    ]
}
Cast Away
Toy Story
Million Dollar Baby
Example 2: Repeating a list of Objects​
In this example, movies is a list of Objects so we use {{name}} and {{year}} to display the name and year property of each movie object.
Template
Data
Result
​
{
    "movies":[ 
        { "name": "Cast Away", "year": 2000 },
        { "name": "Toy Story", "year": 1995 } , 
        { "name": "Million Dollar Baby", "year": 2004 }
    ]
}
Cast Away was released in 2000
Toy Story was released in 1995
Million Dollar Baby was released in 2004{
Accessing Parent and Sibling Data
As mentioned in this section, when you are repeating an element, variables used within the repeated element are within the context of the current item in the list. If you want to access data from outside of the current context you can use the ../ syntax to break out of the current context. 
Example
In this example, we are repeating a Text element over a list of movies and want to display the name of the streaming service where it's available.
Template
Data
Result
{
    "service": "Acmeflix",
    "movies":[ 
        "Cast Away", 
        "Toy Story", 
        "Million Dollar Baby" 
    ]
}
Cast Away is available on Acmeflix.
Toy Story is available on Acmeflix.
Million Dollar Baby is available on Acmeflix.
Nesting
It's possible to repeat elements within repeated elements. This is called nesting. To do this simply specify the name of the list/array property of the current item as the List Variable of the nested element that you want to repeat.
Template
Data
Result
[
 {
   "name": "Pie",
   "category": "Dessert",
   "price": 5.50,
   "total": 3,
   },
   {
   "name": "Brownie",
   "category": "Dessert",
   "price": 4.29,
   "total": 8,
   },
     {
   "name": "Ice Cream",
   "category": "Dessert",
   "price": 4.29,
   "total": 8,
   "disclaimers": ["This dish contains nuts", "Gluten free"]
   },
 "disclaimers" is a nested array in the array of objects.
Pie
Brownie
Ice Cream
-This dish contains nuts, Gluten Free
In this example, we were able to repeat "desserts" to an entire section to get the {{names}}. Then we looped over "disclaimers" to retrieve additional information.