DEV Community

Giulia Chiola
Giulia Chiola

Posted on • Edited on • Originally published at giuliachiola.dev

Add items to an array in Nunjucks

#twig #nunjucks

To add items in Nunjucks, use the .push() function.

  {% set arr = [1,2] %}
  {% set arr = (arr.push(3), arr) %}
Enter fullscreen mode Exit fullscreen mode

Final array:

arr = [1,2,3]
Enter fullscreen mode Exit fullscreen mode

Unfortunately, I did not found any references in the official Nunjucks documentation for this useful function 🤷🏻‍♀️

  {% set animals = ['cat 🐱', 'dog 🐶', 'lion 🦁'] %}
  {% set domesticAnimals = [] %}
  {% for animal in animals %}
    {% if animal !== 'lion' %}
      {% set domesticAnimals = (domesticAnimals.push(animal), domesticAnimals) %}
    {% endif %}
  {% endfor %}
Enter fullscreen mode Exit fullscreen mode

Final array:

domesticAnimals = ['cat 🐱', 'dog 🐶']
Enter fullscreen mode Exit fullscreen mode

🧨 !important

If you use {% set .... %} inside a for-loop block, pay attention to have defined it outside before entering the loop.
I wrote a post about it: 📒 Nunjuks scoped variable declarations

📚 More info

Docs about Twig 'push' filter. Note that this filter is not present into the official Twig documentation 🤷🏻‍♀️

Oldest comments (12)

Collapse
 
lse profile image
Lucas •

Exactly what I was looking for. Worked like a charm !

Thank you !

Collapse
 
giulia_chiola profile image
Giulia Chiola •

I'm glad it was helpful! 💪🏻 Thank you

Collapse
 
dhara profile image
BDhara • • Edited

It is a great post. though I am stuck at a point where I need to pass this final array to another statement such as: window.master.init({{domesticAnimals}});. this shows window.master.init(cat,dog); instead of array. what should I do to pass an array in the above statement. I need data like `window.master.init(['cat','dog']).

Collapse
 
pepelsbey profile image
Vadim Makeev •

Thank you! I had no idea that you can execute arbitrary JS right in the tags.

Do you know where I can read more about that? You’re not just reassigning the value with the pushed item, it’s also wrapped in brackets and you repeat array’s name after a comma. Where this comes from? 🤔

Collapse
 
giulia_chiola profile image
Giulia Chiola •

hey Vadim, thank you for your feedback! I just added at the end of the post where I found the push syntax 😊 I can't really tell why this filter is not available on the official docs.

Collapse
 
matttunney profile image
Matt Tunney •

This is very useful - thanks

Collapse
 
giulia_chiola profile image
Giulia Chiola •

I'm glad that it has been helpful to you. 😊

Collapse
 
yankie profile image
Pavel Yefimov •

Thanx for inspiration!

I've ended up with the following:

{%- set slides = [1, 2] %}
{{- slides.push(3) | reject() }}
{{ slides | dump }}
Enter fullscreen mode Exit fullscreen mode

Result in output:

[1, 2, 3]
Enter fullscreen mode Exit fullscreen mode
Collapse
 
giulia_chiola profile image
Giulia Chiola •

I din't know the reject() method! Thanks for sharing Pavel!

Collapse
 
kaisensan profile image
Felipe Andrade • • Edited

Instead of push use concat, it will simplify things a bit:

{% set domesticAnimals = domesticAnimals.concat(animal) %}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
giulia_chiola profile image
Giulia Chiola •

Thanks for sharing Felipe! I didn't know about the concact() method. I've just checked the official Mozilla blog, and they wrote only about join() for concatenate string. Thanks for make me discovering it!

Collapse
 
nikhil_wadwalkar_abd851f3 profile image
Nikhil Wadwalkar •

is there a similar filter to add additional key/value properties in an object?

View full discussion (12 comments)