Search code examples
htmljsonnunjuckseleventy

Nunjucks for loop running twice


I'm building a website using Nunjucks and Eleventy. I'm attempting to create an unordered list with a Nunjucks for loop (the data is stored in a JSON file). Everything appears to be working, except that the loop runs twice, when it should only run once.

JSON

{"catalog":[
{"title":"Title #1","author":"Author #1","edition":"Third","isbn":"19384579823745","available":"0","total":"4"},
{"title":"Title #2","author":"Author #2","edition":"Fifth","isbn":"1390458093484","available":"2","total":"2"},
{"title":"Title #3","author":"Author #3","edition":"First","isbn":"8974692873489","available":"1","total":"3"},
{"title":"Title #4","author":"Author #4","edition":"Third","isbn":"19384579823745","available":"0","total":"4"},
{"title":"Title #5","author":"Author #5","edition":"Fifth","isbn":"19384579823745","available":"0","total":"4"},
{"title":"Title #6","author":"Author #6","edition":"First","isbn":"1390458093484","available":"2","total":"2"},
{"title":"Title #7","author":"Author #7","edition":"First","isbn":"19384579823745","available":"0","total":"4"},
{"title":"Title #8","author":"Author #8","edition":"First","isbn":"1390458093484","available":"2","total":"2"},
{"title":"Title #9","author":"Author #9","edition":"Second","isbn":"19384579823745","available":"0","total":"4"},
{"title":"Title #10","author":"Author #10","edition":"Second","isbn":"1390458093484","available":"2","total":"2"},
{"title":"Title #11","author":"Author #11","edition":"Second","isbn":"8974692873489","available":"1","total":"3"}
]}

Nunjucks

{% if sheet.catalog %}
<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
  {% for textbook in sheet.catalog %}
  <li class="m-10"><strong>{{ textbook.title }}</strong><br />{{ textbook.author }}<br />Edition: {{ textbook.edition }}<br />ISBN: {{ textbook.isbn }}<br />Available: {{ textbook.available }} of {{ textbook.total }}</li>
  {% endfor %}
</ul>
  {% else %}
  <p>We're sorry. The textbook catalog has encountered an error.</p>
{% endif %}

HTML Output

<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
<li class="m-10"><strong>Title #1</strong><br>Author #1<br>Edition: Third<br>ISBN: 19384579823745<br>Available: 0 of 4</li>
<li class="m-10"><strong>Title #2</strong><br>Author #2<br>Edition: Fifth<br>ISBN: 1390458093484<br>Available: 2 of 2</li>
<li class="m-10"><strong>Title #3</strong><br>Author #3<br>Edition: First<br>ISBN: 8974692873489<br>Available: 1 of 3</li>
<li class="m-10"><strong>Title #4</strong><br>Author #4<br>Edition: Third<br>ISBN: 19384579823745<br>Available: 0 of 4</li>
<li class="m-10"><strong>Title #5</strong><br>Author #5<br>Edition: Fifth<br>ISBN: 19384579823745<br>Available: 0 of 4</li><li class="m-10"><strong>Title #6</strong><br>Author #6<br>Edition: First<br>ISBN: 1390458093484<br>Available: 2 of 2</li>
<li class="m-10"><strong>Title #7</strong><br>Author #7<br>Edition: First<br>ISBN: 19384579823745<br>Available: 0 of 4</li>
<li class="m-10"><strong>Title #8</strong><br>Author #8<br>Edition: First<br>ISBN: 1390458093484<br>Available: 2 of 2</li>
<li class="m-10"><strong>Title #9</strong><br>Author #9<br>Edition: Second<br>ISBN: 19384579823745<br>Available: 0 of 4</li>
<li class="m-10"><strong>Title #10</strong><br>Author #10<br>Edition: Second<br>ISBN: 1390458093484<br>Available: 2 of 2</li>
<li class="m-10"><strong>Title #11</strong><br>Author #11<br>Edition: Second<br>ISBN: 8974692873489<br>Available: 1 of 3</li>
<li class="m-10"><strong>Title #1</strong><br>Author #1<br>Edition: Third<br>ISBN: 19384579823745<br>Available: 0 of 4</li>
<li class="m-10"><strong>Title #2</strong><br>Author #2<br>Edition: Fifth<br>ISBN: 1390458093484<br>Available: 2 of 2</li>
<li class="m-10"><strong>Title #3</strong><br>Author #3<br>Edition: First<br>ISBN: 8974692873489<br>Available: 1 of 3</li>
<li class="m-10"><strong>Title #4</strong><br>Author #4<br>Edition: Third<br>ISBN: 19384579823745<br>Available: 0 of 4</li>
<li class="m-10"><strong>Title #5</strong><br>Author #5<br>Edition: Fifth<br>ISBN: 19384579823745<br>Available: 0 of 4</li>
<li class="m-10"><strong>Title #6</strong><br>Author #6<br>Edition: First<br>ISBN: 1390458093484<br>Available: 2 of 2</li>
<li class="m-10"><strong>Title #7</strong><br>Author #7<br>Edition: First<br>ISBN: 19384579823745<br>Available: 0 of 4</li>
<li class="m-10"><strong>Title #8</strong><br>Author #8<br>Edition: First<br>ISBN: 1390458093484<br>Available: 2 of 2</li>
<li class="m-10"><strong>Title #9</strong><br>Author #9<br>Edition: Second<br>ISBN: 19384579823745<br>Available: 0 of 4</li>
<li class="m-10"><strong>Title #10</strong><br>Author #10<br>Edition: Second<br>ISBN: 1390458093484<br>Available: 2 of 2</li>
<li class="m-10"><strong>Title #11</strong><br>Author #11<br>Edition: Second<br>ISBN: 8974692873489<br>Available: 1 of 3</li>
</ul>

Any idea why the for loop is running twice? I greatly appreciate your help!


Solution

  • There was a copy of the JSON file saved inside of my input folder. I deleted it and now the HTML output no longer shows the rendered data an extra time. Thank you, @RaymondCamden!