title: How do I create a nested "list" from JSON data by using template literals?
body: <p>I am trying to create a nested &quot;list&quot; using template literals. I have put the word list in quotes because I am not creating an unordered or ordered list, this is just a list of items. This is the data I have.</p>
  <pre><code>let items = [{&quot;id&quot;:1,&quot;sub&quot;:[{&quot;item&quot;:2},{&quot;item&quot;:4},{&quot;item&quot;:2},{&quot;item&quot;:8}]},{&quot;id&quot;:2,&quot;sub&quot;:[{&quot;item&quot;:3},{&quot;item&quot;:5},{&quot;item&quot;:4}]},{&quot;id&quot;:3,&quot;sub&quot;:[{&quot;item&quot;:6},{&quot;item&quot;:5},{&quot;item&quot;:8}]}];
  </code></pre>
  <p>The result I expect is the following.</p>
  <pre><code>&lt;div class=&quot;tacos&quot;&gt;
     &lt;div&gt;1
        &lt;div&gt;
          &lt;div&gt;2&lt;/div&gt;
          &lt;div&gt;4&lt;/div&gt;
          &lt;div&gt;2&lt;/div&gt;
          &lt;div&gt;8&lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div&gt;2
          &lt;div&gt;3&lt;/div&gt;
          &lt;div&gt;5&lt;/div&gt;
          &lt;div&gt;8&lt;/div&gt;
     &lt;/div&gt;
     &lt;div&gt;3
          &lt;div&gt;6&lt;/div&gt;
          &lt;div&gt;5&lt;/div&gt;
          &lt;div&gt;8&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>From here I have the following code in js:</p>
  <pre><code>function makeList(items){
     let wrap;
     for (const item of items) {
  
       wrap += `&lt;div&gt;${item}&lt;/div&gt;`;
  
     }
  
     return wrap;
  
  }
  
  makeList(items);
  </code></pre>
  <p>From the code above this is what I get:</p>
  <pre><code>&lt;div&gt;1&lt;/div&gt;
  &lt;div&gt;2&lt;/div&gt;
  &lt;div&gt;3&lt;/div&gt;
  </code></pre>
  <p>From this step, I don't know how to get the sub-items. I could make another template, but they are very similar, so I would like to reuse the current template. I have thought about self-referencing, but when I do that for some reason it doesn't work. Any help or guidance will be appreciated.</p>