DEV Community

Giulia Chiola
Giulia Chiola

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

Add items to an array in 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 πŸ€·πŸ»β€β™€οΈ

Top comments (12)

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
 
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
 
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
 
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
 
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
 
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
 
nikhil_wadwalkar_abd851f3 profile image
Nikhil Wadwalkar

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