Looping

Loop through arrays and objects in your emails

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

Loop through Numbers

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>

Loop through Arrays

<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>

Passing in Arrays

<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>

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>
<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>

Enumerated iteration

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>
Image of an email with title "My shopping list". It contains a table with three columns. The columns are titled "Food", "Index", and "Conditional Message". The first four list entries are blank in the conditional message column, while the remainder have the message: "the first 4 items dont get this message".
Screenshot showing the resulting email

Enumerated object 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:

<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>
Previous ArticleNext Article