Iteration (dealing with lists)
Looping over lists is a very frequent need and in this guide we'll go over the various ways you can do it.
{
"orderId": 1234,
"orderStatus": "pending",
"invoiceId": null,
"client": {
"civility": "Mr",
"fullName": "Peter Parker",
"isNewClient": true
},
"lineItems": [
{ "product": "Super strong silk", "quantity": 100, "price": 123.45 },
{ "product": "Electronic components", "quantity": 12, "price": 12.34 }
]
}
We can loop over the
lineItems array to list our products using a for loop. It will repeat the code for each item in the array:<table>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Total</th>
</tr>
{% for item in lineItems %}
<tr>
<td>{{item.product}}<td>
<td>{{item.quantity}}</td>
<td>${{item.price | with_delimiter, precision: 2}}</td>
<td>${{item.price | times: item.quantity | with_delimiter, precision: 2}}</td>
</tr>
{% endfor %}
</table>
The resulting HTML will look like this:
<table>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Total</th>
</tr>
<tr>
<td>Super strong silk<td>
<td>100</td>
<td>$123.45</td>
<td>$12,345.00</td>
</tr>
<tr>
<td>Electronic components<td>
<td>12</td>
<td>$12.34</td>
<td>$148.08</td>
</tr>
</table>
Data formatting
We're formatting the monetary values using the
with_delimiter filter here. You can learn more in our documentation about built-in filters and the PDFMonkey filters.Learn more
You can learn more about iterating over lists in the official Liquid documentation, including things like
limit, offset, etc.Inside a
for loop, you get access to a special object that stores the current state of the loop. It can be useful to build special cases for the first or last iteration, for instance.{% for item in lineItems %}
{% if forloop.first == true %}
<p>{{item.product}} is the first item.</p>
{% elsif forloop.last == true %}
<p>{{item.product}} is the last item.</p>
{% else %}
<p>{{item.product}} is an item.</p>
{% endif %}
{% endfor %}
Learn more
Discover the complete range of possibilities of
forloop in the dedicated documentation, including things like index, index0 or length.
Last modified 11mo ago