Looping
Loop through arrays and objects in your emails
Legacy Components
You are reading the legacy components documentation. Please refer to the new documentation for the latest components.
Components support loops, enabling you to do iterative tasks with few keystrokes.
Numerical iteration is 0 indexed - the first number is 0.
<component>
<ul>
<li foreach="n in 50">${n}</li>
</ul>
</component>
Using this component in an email:
<html>
<body>
A simple email
<my-first-component>
</body>
</html>
The output source becomes:
<html>
<body>
A simple email
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
</ul>
</body>
</html>
<component>
<ul>
<li
foreach="food in ['tomato','potato','lettuce', 'cucumber', 'carrots','apples']"
>
${food}
</li>
</ul>
</component>
Using this component in an email:
<html>
<body>
A simple email
<my-first-component>
</body>
</html>
The output source becomes:
<html>
<body>
A simple email
<ul>
<li>tomato</li>
<li>potato</li>
<li>lettuce</li>
<li>cucumber</li>
<li>carrots</li>
<li>apples</li>
</ul>
</body>
</html>
<fieldset>
<fieldset name="products" , type="list">
<input type="text" />
</fieldset>
</fieldset>
<component>
<ul>
<li foreach="product in products">${product}</li>
</ul>
</component>
<html>
<body>
A simple email
<my-first-component products="['apples','bananas','tomatoes']">
</my-first-component>
</body>
</html>
The resulting output is:
<html>
<body>
A simple email
<ul>
<li>apples</li>
<li>bananas</li>
<li>tomatoes</li>
</ul>
</body>
</html>
<fieldset>
<fieldset name="products" , type="list">
<input type="text" name="name" />
<input type="text" name="price" />
</fieldset>
</fieldset>
<component>
<ul>
<li foreach="product in products">${product.name} - ${product.price}</li>
</ul>
</component>
<html>
<body>
A simple email
<my-first-component
products="[{name:'apple', price:'$0.50'},{name:'banana', price:'$0.75'},{name:'tomato',price:'$3.00'}]"
>
</my-first-component>
</body>
</html>
the output is:
<html>
<body>
A simple email
<ul>
<li>apple - $0.50</li>
<li>banana - $0.75</li>
<li>tomato - $3.00</li>
</ul>
</body>
</html>
You can also import objects that are not iterated over.
<fieldset>
<fieldset name="products" , type="list">
<input type="text" name="name" />
<input type="text" name="price" />
</fieldset>
<fieldset name="store" , type="dictionary">
<input type="text" name="name" />
<input type="text" name="location" />
</fieldset>
</fieldset>
<component>
${store.name}
<br />
${store.location}
</component>
<html>
<body>
A simple email
<my-first-component
products="[{name:'apple', price:'$0.50'},{name:'banana', price:'$0.75'},{name:'tomato',price:'$3.00'}]"
store="{name:'Main Office', location:'123 Somewhere Drive'}"
>
</my-first-component>
</body>
</html>
the output is:
<html>
<body>
A simple email Main Office
<br />
123 Somewhere Drive
</body>
</html>
Sometimes you want access to both the iterated item and it's index (count) in the loop.
<component>
<table>
<tr>
<th>Food</th>
<th>Index</th>
<th>Conditional Message</th>
</tr>
<tr
foreach="(food,index) in ['tomato','potato','lettuce', 'cucumber', 'carrots','apples', 'bananas', 'beans']"
>
<td>${food}</td>
<td>${index}</td>
<td>${index>3?'the first 4 items dont get this message':''}</td>
</tr>
</table>
</component>
Using this in a simple email:
<html>
<head></head>
<body>
<h1>My shopping list</h1>
<enumerated-iteration></enumerated-iteration>
</body>
</html>
produces an output source:
<html>
<head></head>
<body>
<h1>My shopping list</h1>
<table>
<tr>
<th>Food</th>
<th>Index</th>
<th>Conditional Message</th>
</tr>
<tr>
<td>tomato</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>potato</td>
<td>1</td>
<td></td>
</tr>
<tr>
<td>lettuce</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>cucumber</td>
<td>3</td>
<td></td>
</tr>
<tr>
<td>carrots</td>
<td>4</td>
<td>the first 4 items dont get this message</td>
</tr>
<tr>
<td>apples</td>
<td>5</td>
<td>the first 4 items dont get this message</td>
</tr>
<tr>
<td>bananas</td>
<td>6</td>
<td>the first 4 items dont get this message</td>
</tr>
<tr>
<td>beans</td>
<td>7</td>
<td>the first 4 items dont get this message</td>
</tr>
</table>
</body>
</html>
<component>
<div
foreach="(value, key, index) in {key1:'value1',key2:'value2', key3:'value3'}"
>
${index+1}. ${key}: ${value}
</div>
</component>
Using this component in a simple email:
<html>
<head></head>
<body>
<enumerated-iteration>
</body>
</html>
The output source becomes:
<html>
<head></head>
<body>
<div>1. key1: value1</div>
<div>2. key2: value2</div>
<div>3. key3: value3</div>
</body>
</html>