Loop through object in nunjucks?

Question

I have a file called "list.json" set up like this:

{
  "thing1": "Thing1",
  "thing2": "Thing2",
  "thing3": "Thing3"
}

How can I loop through this? I want to do something like:

{% for item in list%}
  <option>{{ thing }}</option>
{% endfor %}

Possible duplicate of [Loop through object properties nunjucks](https://stackoverflow.com/questions/20990516/loop-through-object-properties-nunjucks) — KyleMit, Sep 02 '19 at 17:31

score 5 · Answer 1 · answered Jan 20 '16 at 14:34

5

You can try following

{% for key, item in list%}
  <option>{{ item }}</option>
{% endfor %}

answered Jan 20 '16 at 14:34

Nikhil Aggarwal

26,884
3
37
53

It is not looping anything. Nothing shows up. Fails silently. – j_d Jan 20 '16 at 15:47
Are you able to paint `list`? I mean does it has the object or it may be possible that `list` is not set properly – Nikhil Aggarwal Jan 20 '16 at 18:21
How do you mean paint? – j_d Jan 21 '16 at 09:35
@JohnDoe - I mean show in browser i.e. what do you see when you write `{{list}}`? – Nikhil Aggarwal Jan 21 '16 at 09:46

score 1 · Answer 2 · answered Feb 07 '16 at 23:31

Have you imported the JSON? If not, in the render JS, add a variable:

list: JSON.parse(fs.readFileSync('list.json'))

If you are using it multiple times, add a variable at the top of the file instead.

var LIST = JSON.parse(fs.readFileSync('list.json'))

It's also possible to use the asynchronous method, but you need some nesting:

fs.readFile('list.json', function(err, list) {
    env.render('template.html', {
        list: list,
        //other data
    }
}

score 0 · Answer 3 · answered Jan 27 '16 at 12:58

0

If you are using Gulp, this can help you: http://www.zell-weekeat.com/nunjucks-with-gulp#Populating-HTML-with-data

answered Jan 27 '16 at 12:58

Emanuel Saramago

422
4
15

score 0 · Answer 4 · answered Apr 19 '17 at 10:03

You should first create an array of objects in back end :

var things = [];

things.push({id : 'thing1', name : 'Thing1'});
things.push({id : 'thing2', name : 'Thing2'});
things.push({id : 'thing3', name : 'Thing3'});

Now on front end you would be able to loop through this array like below :

{% for thing in things %}
<option value="{{ thing.id }}"> {{ thing.name }}</option>
{% endfor %}

I hope this will help you out.

Loop through object in nunjucks?

4 Answers4