Loop through object properties nunjucks

Question

I've got following model:

items: {
    someId1: 
        {
            property1....
        },
    someId2: {...},
    someIdN: {...}
}

I would like to get a for-loop in my template (nunjucks) which goes through all the "someId's". Does anyone have any idea how? A normal for-loop does not work since it's not an array and since I use the "someId.." for a reference in another template I cannot put it to an array.

Any help would be awesome.

Answer 1

This answer is actually right on the Nunjucks homepage:

<ul>
   {% for name, item in items %}
      <li>{{ name }}: {{ item }}</li>
   {% endfor %}
</ul>

In this case, name is the object property name, and item is the object property value, so you can also think of it like this:

{% for key, value in object %}

In your case this would be:

<ul>
   {% for someId, item in items %}
      <li>{{ someId }}: {{ item.property1 }}</li>
   {% endfor %}
</ul>

As you can use the for loop for arrays and object/hashes.

Answer 2

I think the answer you're looking for is to use something like this:

{% for tuple in items | dictsort %}
   <p>{{tuple[0]}}, {{tuple[1]}}</p>
{% endfor %}

Very simply the dictsort filter returns a list of tuples(key-value pair) from the object in a sorted manner, which can then be accessed as follows.

So, if the object is

items: {
    someId1: 
        {
            property1....
        },
    someId2: {...},
    someIdN: {...}
}

You would get,

[['someid1',{property1: ..}], ['someid2','...'], ['someid3','...']]

Now you can just use the loop as if you were looping through an array. Keep in mind that additional nested properties must be handled manually too.

The previous answers suggested manually extracting each property. What if I wanted the same page with data that has 5 properties as well as 10 properties. What if I wanted all keys by not specifying them? Which is something I came across and stumbled upon this question. As of 2022, we can use dictsort but previous answers may worked just as well.

Answer 3

You can use nested loops like this:

<ul>
  {% for item in items %}
    {% for something in item.someId1 %}
      <li>
        {{ something.property1 }}
      </li>
    {% endfor %}
  {% endfor %}
</ul>

For this json object:

items: {
  someId1: {
    property1: "It makes you want to shout! Raise your hands up and..."
  },
  someId2: {...},
  someIdN: {...}
}