Loops: iterate over data in your components
Design Studio New UpdatedComponents support loops, enabling you to iterate with fewer keystrokes.
This article applies to Design Studio
We are currently piloting Design Studio, our new email design system, and making some information available to customers. If you don’t have access to Design Studio, please continue to use our other email editors.
Loop through numbers
Numerical iteration is 0 indexed - the first number is 0.
<template>
<ul>
<li #each="n in 10">${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>
</ul>
</body>
</html>
Loop through arrays
You can loop through an array to dynamically generate repeated elements—like list items—based on your data.
<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
You can also pass in arrays to a component to render data defined in each email they’re in.
<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>
Using this component in an email:
<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>
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>
Copied to clipboard!
