Nunjucks advanced loops

Nunjucks is a powerful template engine that allows to loop through arrays and also objects 😏

Loop though an array #

{% set animals = ['🐱', '🐶', '🐺'] %}

{% for item in animals %}
    Value: {{ item }}
{% endfor %}

Value: 🐱
Value: 🐶
Value: 🐺

Loop though an object #

{% set animal = {
    name: 'cat',
    emoji: '🐱'
} %}

{% for key, value in animal %}
    {{ key }}: {{ value }}
{% endfor %}

Note that we have to declare the two parameters of the loop key, value.

name: cat
emoji: 🐱

The iterable property #

In Twig exists an intresting property, iterable that checks if a variable can be iterable in a for loop:

Loop through an array:

{% set animals = ['🐱', '🐶', '🐺'] %}

{% if animals is iterable %}
  {% for item in animals %}
    Value: {{ item }}
  {% endfor %}
{% else %}
  Not iterable: {{ animal }}
{% endif %}

Value: 🐱
Value: 🐶
Value: 🐺

Loop through an object:

{% set animals = {
  name: 'cat',
  emoji: '🐱'
} %}

{% if animals is iterable %}
  {% for item in animals %}
    Value: {{ item }}
  {% endfor %}
{% else %}
  Not iterable: {{ animal }}
{% endif %}

Value: cat
Value: 🐱

🧨 !important

Please note that iterable is a Twig property and can have unexpected results in Nunjucks template engine.

In Twig a string is not iterable:

{% set animal = 'cat' %}

{% if animal is iterable %}
  Iterable!
  {% for item in animal %}
    Value: {{ item }}
  {% endfor %}
{% else %}
  Not iterable!
  {{ animal }}
{% endif %}

Twig output

Not iterable!
cat

but if we run the same code in Nunjucks, we discover that a string is iterable 🤯

Nunjucks output

Iterable!
Value: c
Value: a
Value: t

Accessing the parent loop #

Nunjucks provides in its loops the loop property.

From the docs the loop.index is

the current iteration of the loop (1 indexed)

But what if we have two nested loops and we want to access to the parent loop?

Workaround: save the loop index as row number! 😏

In this example we have a matrix content: two rows and each row has one ore more cells. If we want to print all cells content and position, we have to:

• loop (parent loop) through the rows

• loop (child loop) through the columns

• get the content inside each cell

  {% set animals = [
      ['🐱', '🐶', '🐺'],
      ['🐍']
  ] %}
  
  <table>
    {% for row in animals %}
      {# new row #}
      <tr>
      {% set rowloop = loop %}
      {% for cell in row %}
        <td>
            row (rowloop.index):{{ rowloop.index }}
            column (loop.index): {{ loop.index }}
            cell: {{ cell }}
        </td>
      {% endfor %}
      </tr>
    {% endfor %}
  </table>

HTML output

<table>
  {# new row #}
  <tr>
    <td>
        row (rowloop.index):1
        column (loop.index): 1
        cell: 🐱
    </td>
    <td>
        row (rowloop.index):1
        column (loop.index): 2
        cell: 🐶
    </td>
    <td>
        row (rowloop.index):1
        column (loop.index): 3
        cell: 🐺
    </td>
  </tr>
  {# new row #}
  <tr>
    <td>
        row (rowloop.index):2
        column (loop.index): 1
        cell: 🐍
    </td>
  </tr>
</table>

📚 More info

• Twig playground