Loop in Nunjucks behaving differently depending on inner HTML markup

Question

I have the following Nunjucks template supposed to render a list of items as list:

{% for item in items %}
    <li>
        {{item.title}}
    </li>
{% endfor %}

and as table

<table border="1">
  {% for item in items %}
  <tr>
    <td>{{item.title}}</td>
  </tr>
  {% endfor %}
</table>

The list is correctly rendered as

<li>a</li>
<li>b</li>
<li>c</li>

however the table is supposed to have three TR elements however it is rendered as

<table border="1">
  <tr>
     <td></td>
  </tr>
</table>

Why is there only one TR element instead of three TR elements?

JSFiddle is here:

The JSFiddle link says 404 We're truly sorry, but there is no such page. — xmojmr, Jul 22 '15 at 10:24
It seems that `$('#template').html()` does not preserve the `nunjucks` markup and does not return the template #2 that you expect — xmojmr, Jul 22 '15 at 10:30

gzerone · Answer 1 · 2022-09-08T02:28:42.327

Same issue, not sure why that happen, but here is my solution:

<table id="target" >replace target tag DIV to TABLE</table>

And remove useless table tag from your item loop, just wrap it by template tag:

<template id="template">
  {% for item in items %}
  <tr>
    <td>{{item.title}}</td>
  </tr>
  {% endfor %}
</template>

The table rows will render corrently. I just test with htmx + nunjucks, hope that can help.

1 Answers1