Iterating through a list or a table in an HTML template

By using for statements inside embedded tags, you can iterate through arrays of data to populate ordered and unordered lists and tables in your HTML template. For all the examples that we will describe here, we will use the following merge parameters, which represent an array of names:

"merge_parameters": {"names": [{"first": "John", "last": "Doe"}, {"first": "Jane", "last": "Smith"}]}

Ordered and unordered lists

To embed an ordered list into your HTML template, you would insert the following into the body of your document in the HTML source editor:

<html>
<ol>
{% for name in names %}
   <li>{{name.last}}</li>
{% endfor %}
</ol>
</html>

To embed an unordered list into your HTML template, you would insert the following into the body of your document in the HTML source editor:

<html>
<ul>
{% for name in names %}
   <li>{{name.last}}</li>
{% endfor %}
</ul>
</html>

Tables

To embed a table into your HTML template, you would insert the following into the body of your document in the HTML source editor:

<html>
<table>
  <tr>
     <th>First Name</th>
     <th>Last name</th>
  </tr>
{% for name in names %}
  <tr>
     <td>{{name.first}}</td>
     <td>{{name.last}}</td>
  </tr>
{% endfor %}
</table>
</html>

📘

Note: You can also build a table in your HTML template using div tags.

To see lists and tables in action, check out how to build a full-featured HTML template.

Preview in the current editor

Open the HTML template from Studio, edit its source, and click Save. Select Preview, enter sample merge values, and click Preview in the panel. The screenshot below demonstrates the current preview with a separate project-summary example.

Current HTML source and rendered preview. Local demonstration using production application code and test data.