Looping

Components support loops, enabling you to do iterative tasks with few keystrokes.

Note that <!-- my-first-component --> and <!-- my-email --> are comments that denote which file is being used. They are not necessary for functionality and can be removed.

Loop through Numbers

Numerical iteration is 0 indexed - the first number is 0.

<!-- my-first-component -->
<component>
<ul>
<li foreach="n in 50"> ${n} </li>
</ul>
</component>

Using this component in an email:

<!-- my-email -->
<html>
<body>
A simple email
<my-first-component>
</body>
</html>

The output source becomes:

<!-- my-email -->
<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>

Loop through Arrays

<!-- my-first-component -->
<component>
<ul>
<li foreach="food in ['tomato','potato','lettuce', 'cucumber', 'carrots','apples']"> ${food} </li>
</ul>
</component>

Using this component in an email:

<!-- my-email -->
<html>
<body>
A simple email
<my-first-component>
</body>
</html>

The output source becomes:

<!-- my-email -->
<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>

Passing in Arrays

<!-- my-first-component -->
<fieldset>
<fieldset name='products', type="list">
<input type="text">
</fieldset>
</fieldset>
<component>
<ul>
<li foreach="product in products"> ${product} </li>
</ul>
</component>
<!-- my-email -->
<html>
<body>
A simple email
<my-first-component products="['apples','bananas','tomatoes']">
</my-first-component>
</body>
</html>

The resulting output is:

<!-- my-email -->
<html>
<body>
A simple email
<ul>
<li> apples </li><li> bananas </li><li> tomatoes </li>
</ul>
</body>
</html>

Passing in Objects

<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>
<!-- my-email -->
<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:

<!-- my-email -->
<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>
<!-- my-email -->
<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:

<!-- my-email -->
<html>
<body>
A simple email
Main Office
<br>
123 Somewhere Drive
</body>
</html>

Enumerated iteration

Sometimes you want access to both the iterated item and it's index (count) in the loop.

<!-- enumerated-iteration -->
<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>
Screenshot showing the resulting email
Screenshot showing the resulting email

Enumerated object iteration

<!-- enumerated-iteration -->
<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:

<!-- my-email -->
<html>
<head></head>
<body>
<enumerated-iteration>
</body>
</html>

The output source becomes:

<!-- my-email -->
<html>
<head></head>
<body>
<div> 1. key1: value1 </div><div> 2. key2: value2 </div><div> 3. key3: value3 </div></body>
</html>