Posted on • Edited on • Originally published atgiuliachiola.dev
Add items to an array in Nunjucks
To add items in Nunjucks, use the.push() function.
{%setarr=[1,2]%}{%setarr=(arr.push(3),arr)%}Final array:
arr = [1,2,3]Unfortunately, I did not found any references in the officialNunjucks documentation for this useful function 🤷🏻♀️
{%setanimals=['cat 🐱','dog 🐶','lion 🦁']%}{%setdomesticAnimals=[]%}{%foranimalinanimals%}{%ifanimal!=='lion'%}{%setdomesticAnimals=(domesticAnimals.push(animal),domesticAnimals)%}{%endif%}{%endfor%}Final array:
domesticAnimals = ['cat 🐱', 'dog 🐶']🧨!important
If you use
{% set .... %}inside a for-loop block, pay attention to have defined itoutside before entering the loop.
I wrote a post about it:📒 Nunjuks scoped variable declarations
📚More info
Docs aboutTwig 'push' filter. Note that this filter is not present into the officialTwig documentation 🤷🏻♀️
Top comments(12)
- LocationSão Paulo, Brazil
- WorkFrontend Developer
- Joined
Instead ofpush useconcat, it will simplify things a bit:
{%setdomesticAnimals=domesticAnimals.concat(animal)%}
- LocationVal di Susa, Italia
- EducationMedia Engineer, Politecnico di Torino
- WorkFront-end web developer
- Joined
Thanks for sharing Felipe! I didn't know about theconcact() method. I've just checked the official Mozilla blog, and they wrote only aboutjoin() for concatenate string. Thanks for make me discovering it!
Thanx for inspiration!
I've ended up with the following:
{%- set slides = [1, 2] %}{{- slides.push(3) | reject() }}{{ slides | dump }}Result in output:
[1, 2, 3]- LocationVal di Susa, Italia
- EducationMedia Engineer, Politecnico di Torino
- WorkFront-end web developer
- Joined
I din't know thereject() method! Thanks for sharing Pavel!
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 showswindow.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']).
- Email
- LocationBerlin, Germany
- Joined
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? 🤔
- LocationVal di Susa, Italia
- EducationMedia Engineer, Politecnico di Torino
- WorkFront-end web developer
- Joined
hey Vadim, thank you for your feedback! I just added at the end of the post where I found thepush syntax 😊 I can't really tell why this filter is not available on the official docs.
- LocationVal di Susa, Italia
- EducationMedia Engineer, Politecnico di Torino
- WorkFront-end web developer
- Joined
I'm glad it was helpful! 💪🏻 Thank you
This is very useful - thanks
- LocationVal di Susa, Italia
- EducationMedia Engineer, Politecnico di Torino
- WorkFront-end web developer
- Joined
I'm glad that it has been helpful to you. 😊
For further actions, you may consider blocking this person and/orreporting abuse
