title: Nested Nunjucks For Loop
body: <p>I am trying to write a nunjucks template that loops through an outer array and populates columns, then loops through a nested array to make rows in each column.</p>
  
  <p>So, my data structure looks something like this: </p>
  
  <pre><code>var data = [
      {
          'type' : 'fruit',
          'list' : ['banana', 'kiwi', 'strawberry']
      },
      {
          'type' : 'vegetables'
          'list' : ['tomato', 'carrot', 'zucchini']
      }
  ]
  </code></pre>
  
  <p>I want to create an html doc that looks like this: </p>
  
  <pre><code>&lt;div&gt;
      &lt;span&gt;fruit&lt;/span&gt;
      &lt;ul&gt;
           &lt;li&gt;banana&lt;/li&gt;
           &lt;li&gt;kiwi&lt;/li&gt;
           &lt;li&gt;strawberry&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;span&gt;vegetables&lt;/span&gt;
      &lt;ul&gt;
           &lt;li&gt;tomato&lt;/li&gt;
           &lt;li&gt;carrot&lt;/li&gt;
           &lt;li&gt;zucchini&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried making a nunjucks template that looks something like this:</p>
  
  <pre><code>{% for category in data %}
      &lt;div&gt;
          &lt;span&gt;{{category.type}}&lt;/span&gt;
          &lt;ul&gt;
             {% for thing in category.list %}
              &lt;li&gt;{{thing}}&lt;/li&gt;
             {% endfor %}
          &lt;/ul&gt;
      &lt;/div&gt;
  {% endfor %}
  </code></pre>
  
  <p>But, for some reason, I can't access the inner variables. I don't really have access to the inner for loop.  I have looked on stack overflow, and through their documentation, but can't find anything about nested for loops.</p>
  
  <p>Any help would be greatly appreciated.  Thank you.</p>