Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Giulia Chiola
Giulia Chiola

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)%}
Enter fullscreen modeExit fullscreen mode

Final array:

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

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%}
Enter fullscreen modeExit fullscreen mode

Final array:

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

🧨!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)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
kaisensan profile image
Felipe Andrade
JS lover. Open Source evangelist. Dev Community enthusiastic.
  • Location
    São Paulo, Brazil
  • Work
    Frontend Developer
  • Joined
• Edited on• Edited

Instead ofpush useconcat, it will simplify things a bit:

{%setdomesticAnimals=domesticAnimals.concat(animal)%}
Enter fullscreen modeExit fullscreen mode
CollapseExpand
 
giulia_chiola profile image
Giulia Chiola
Front-end Developer. 👾Media engineer. ⚡Facing life one bug at a time. 🔥 Easily bribed with chocolate. 🍫 she/her.
  • Location
    Val di Susa, Italia
  • Education
    Media Engineer, Politecnico di Torino
  • Work
    Front-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!

CollapseExpand
 
yankie profile image
Pavel Yefimov
  • Joined

Thanx for inspiration!

I've ended up with the following:

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

Result in output:

[1, 2, 3]
Enter fullscreen modeExit fullscreen mode
CollapseExpand
 
giulia_chiola profile image
Giulia Chiola
Front-end Developer. 👾Media engineer. ⚡Facing life one bug at a time. 🔥 Easily bribed with chocolate. 🍫 she/her.
  • Location
    Val di Susa, Italia
  • Education
    Media Engineer, Politecnico di Torino
  • Work
    Front-end web developer
  • Joined

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

CollapseExpand
 
dhara profile image
BDhara
  • Joined
• Edited on• 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 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']).

CollapseExpand
 
pepelsbey profile image
Vadim Makeev
Frontend developer in love with the Web, browsers, bicycles, and podcasting. He/him, Google Developer Expert

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? 🤔

CollapseExpand
 
giulia_chiola profile image
Giulia Chiola
Front-end Developer. 👾Media engineer. ⚡Facing life one bug at a time. 🔥 Easily bribed with chocolate. 🍫 she/her.
  • Location
    Val di Susa, Italia
  • Education
    Media Engineer, Politecnico di Torino
  • Work
    Front-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.

CollapseExpand
 
lse profile image
Lucas
  • Joined

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

Thank you !

CollapseExpand
 
giulia_chiola profile image
Giulia Chiola
Front-end Developer. 👾Media engineer. ⚡Facing life one bug at a time. 🔥 Easily bribed with chocolate. 🍫 she/her.
  • Location
    Val di Susa, Italia
  • Education
    Media Engineer, Politecnico di Torino
  • Work
    Front-end web developer
  • Joined

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

CollapseExpand
 
matttunney profile image
Matt Tunney
  • Work
    Web developer
  • Joined

This is very useful - thanks

CollapseExpand
 
giulia_chiola profile image
Giulia Chiola
Front-end Developer. 👾Media engineer. ⚡Facing life one bug at a time. 🔥 Easily bribed with chocolate. 🍫 she/her.
  • Location
    Val di Susa, Italia
  • Education
    Media Engineer, Politecnico di Torino
  • Work
    Front-end web developer
  • Joined

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

CollapseExpand
 
nikhil_wadwalkar_abd851f3 profile image
Nikhil Wadwalkar
  • Joined

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

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Front-end Developer. 👾Media engineer. ⚡Facing life one bug at a time. 🔥 Easily bribed with chocolate. 🍫 she/her.
  • Location
    Val di Susa, Italia
  • Education
    Media Engineer, Politecnico di Torino
  • Work
    Front-end web developer
  • Joined

More fromGiulia Chiola

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp