DEV Community

loading...

Nunjucks advanced loops

Giulia Chiola
Front-end Developer. ๐Ÿ‘พ Media engineer. โšก Facing life one bug at a time. ๐Ÿ”ฅ Easily bribed with chocolate. ๐Ÿซ she/her.
Originally published at giuliachiola.dev ใƒป2 min read

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 %}
Enter fullscreen mode Exit fullscreen mode
Value: ๐Ÿฑ
Value: ๐Ÿถ
Value: ๐Ÿบ
Enter fullscreen mode Exit fullscreen mode

Loop though an object

{% set animal = {
    name: 'cat',
    emoji: '๐Ÿฑ'
} %}

{% for key, value in animal %}
    {{ key }}: {{ value }}
{% endfor %}
Enter fullscreen mode Exit fullscreen mode

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

name: cat
emoji: ๐Ÿฑ
Enter fullscreen mode Exit fullscreen mode

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 %}
Enter fullscreen mode Exit fullscreen mode
Value: ๐Ÿฑ
Value: ๐Ÿถ
Value: ๐Ÿบ
Enter fullscreen mode Exit fullscreen mode

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 %}
Enter fullscreen mode Exit fullscreen mode
Value: cat
Value: ๐Ÿฑ
Enter fullscreen mode Exit fullscreen mode

๐Ÿงจ !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 %}
Enter fullscreen mode Exit fullscreen mode

Twig output

Not iterable!
cat
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

๐Ÿ“š More info

Discussion (0)