Looping

Loop through arrays and objects in your emails.

Components support loops, enabling you to iterate with fewer keystrokes.

Loop through numbers

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

<template>
  <ul>
    <li #each="n in 50">${n}</li>
  </ul>
</template>

Using this component in an email:

<html>
  <body>
    A simple email
    <my-first-component></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

<template>
  <ul>
    <li
      #each="food in ['tomato','potato','lettuce', 'cucumber', 'carrots','apples']"
    >
      ${food}
    </li>
  </ul>
</template>

Using this component in an email:

<html>
  <body>
    A simple email
    <my-first-component></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

<script>
export const props = Component.defineProps({
    products: {
      schema: Component.props.array(Component.props.string()),
    },
});
</script>


<template>
  <ul>
    <li #each="product in products">${product}</li>
  </ul>
</template>
<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

<script>
  export const props = Component.defineProps({
  products: {
    schema: Component.props.array(
      Component.props.object({
        name: Component.props.string(),
        price: Component.props.string(),
      })
    ),
  },
});
</script>
<template>
  <ul>
    <li #each="product in props.products">${product.name} - ${product.price}</li>
  </ul>
</template>
<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.

<script>
export const props = Component.defineProps({
  products: {
    schema: Component.props.array(
      Component.props.object({
        name: Component.props.string(),
        price: Component.props.string(),
      })
    ),
  },
  store: {
    schema: Component.props.object({
      name: Component.props.string(),
      location: Component.props.string(),
    }),
  }
});
</script>
<template> 
  <ul>
    <li #each="product in props.products">${product.name} - ${product.price}</li>
  </ul>
    ${props.store.name}
    <br />
    ${props.store.location}
</template>
<html>
  <body>
    A simple email
    <my-test :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-test>
  </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 its index (count) in the loop.

<template>
  <table>
    <tr>
      <th>Food</th>
      <th>Index</th>
      <th>Conditional Message</th>
    </tr>
    <tr
      #each="(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>
</template>

Using this in a simple email:

<html>
  <head></head>
  <body>
    <h1>My shopping list</h1>
    <enumerated-iteration></enumerated-iteration>
  </body>
</html>

This is the 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

<template>
  <div
    #each="(value, key, index) in {key1:'value1',key2:'value2', key3:'value3'}"
  >
    ${index+1}. ${key}: ${value}
  </div>
</template>

Using this component in a simple email:

<html>
  <head></head>
  <body>
    <enumerated-iteration></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