DEV Community

Giulia Chiola
Giulia Chiola

Posted on β€’ Edited on β€’ Originally published at giuliachiola.dev

14 2

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 πŸ€·πŸ»β€β™€οΈ

Image of Timescale

πŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsβ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more β†’

Top comments (12)

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more