Using Nunjucks to iterate through an array and selectively choose specific items within a for loop

Question

Using Nunjucks to iterate through an array and selectively choose specific items within a for loop

When faced with a large array of items like [5, 21, 83, 74, 12], and my list structure is as follows:

{
  "list:" [
    { "title": "Blue" },
    { "title": "Green" },
    { "title": "Yellow" } ...
  ]
}

I am considering using a for loop to select specific items, but I'm uncertain about the correct syntax and filters. What adjustments should I make to achieve this?

{% for chosen_item in list %}
    {% chosen_item %}
{% endfor %}

javascript arrays for-loop nunjucks

Answer 1

Answer №1

If you find yourself in need of applying a filter multiple times, consider adding a custom filter.

var templateEngine  = require('nunjucks');
var env = templateEngine.configure();
env.addFilter('mycustomfilter', array => array.filter(element => element.title == 'Green'));

var renderedHtml = env.renderString(`
    {% for item in list | mycustomfilter %} 
        {{item.id}} {{ item.title}} 
    {% endfor %}
    `, 
    { 
        list: [
            { id: 1, title: 'Blue' },
            { id: 2, title: 'Green' },
            { id: 3, title: 'Yellow' },
            { id: 4, title: 'Green' }
        ]
    }
);

console.log(renderedHtml);

An alternative approach is to utilize if condition whenever needed:

{% for item in list %}
    {{ item if item.title == 'Green' }}
{% endfor %}

or

{% for item in list %}
    {% if item.title == 'Green' %}
        {{ item }}
    {% endif %} 
{% endfor %}

Answer 2

If you find yourself in need of applying a filter multiple times, consider adding a custom filter.

var templateEngine  = require('nunjucks');
var env = templateEngine.configure();
env.addFilter('mycustomfilter', array => array.filter(element => element.title == 'Green'));

var renderedHtml = env.renderString(`
    {% for item in list | mycustomfilter %} 
        {{item.id}} {{ item.title}} 
    {% endfor %}
    `, 
    { 
        list: [
            { id: 1, title: 'Blue' },
            { id: 2, title: 'Green' },
            { id: 3, title: 'Yellow' },
            { id: 4, title: 'Green' }
        ]
    }
);

console.log(renderedHtml);

An alternative approach is to utilize if condition whenever needed:

{% for item in list %}
    {{ item if item.title == 'Green' }}
{% endfor %}

or

{% for item in list %}
    {% if item.title == 'Green' %}
        {{ item }}
    {% endif %} 
{% endfor %}

Using Nunjucks to iterate through an array and selectively choose specific items within a for loop

Answer №1

Similar questions

An AngularJS directive designed to execute after a text input has been modified

The watch function was triggered for a different key in the array from the one that

What is the best way to connect my data with my Backbone Views?

I am facing difficulty creating a dropdown menu with nested options that only appear when the user hovers over the main selection

Whenever I attempt to generate a forecast utilizing a tensorflow.js model, I encounter the following error message: "Uncaught TypeError: Cannot read property 'length' of undefined."

How can we improve our handling of cyclic requires and EventEmitter in our code?

Retrieving the value of the selected item when it is changed

Looking to learn how to replicate data effortlessly with either javascript or jquery?

Retrieve form data from Vuex state to make edits

Is it possible to utilize the NavigationTimingAPI with asynchronous requests?

What is causing the animate callback to not properly wait for the completion of the animations?

Having trouble viewing the image slider on an HTML webpage

The function inputLocalFont.addEventListener does not exist and cannot be executed

Viewing HTML web pages using Mozilla Firebox

Is it possible to incorporate two ng-repeat directives within a single td element in a table?

Swap out a particular component during the testing phase

Determine the number of documents in MongoDB that meet a specific pattern using

Rotating Camera around a Vector3 Point in Three.js

Top tip for implementing toggle functionality with a specified duration in React.js

Uh-oh! The module "side-channel" cannot be found. An error occurred in the loader with code 936 when trying to run the command "npm start"