title: Turn a JSON array of arrays into <ul> and <li> elements
body: <p>I'm creating a custom visual in Microsoft Power BI. The creation api uses typescript and the d3 library. I'm also using jquery</p>
  
  <p>I'm trying to create a hierarchical tree that represents the fields that are dragged into the visual. So the depth of the tree is decided during run-time so It doesn't know how many layers it will have.</p>
  
  <p>I've managed to arrange my dummy data into a nested JSON array. </p>
  
  <p>This is a screenshot from the console when I do console.log(finalViewModel)</p>
  
  <p><a href="https://i.stack.imgur.com/3yvt1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3yvt1.png" alt="screenshot"></a></p>
  
  <pre><code>[{ "text": "France","id": 591, "parent": 0, "identity": {long text},
     "nodes"
          [{"text": "Bread", "id", 478, "parent": 591, "identity: {long text}, 
          "nodes" []}, 
          {"text": "Nocco", "id", 498, "parent": 591, "identity: {long text}, 
          "nodes" []}, 
          {"text": "Red Wine", "id", 718, "parent": 591, "identity: {long 
          text}, 
          "nodes" []}]},
     {"text: "Germany", "id" .....so on and so forth
  </code></pre>
  
  <p>This is how my data looks when I JSON.stringify it in the console, also I used only 2 fields so It wouldn't be too cluttered.</p>
  
  <p><strong>"identity": {long text}</strong>, does not display like that. The identity field is for the Power BI selection manager so when something from the tree is clicked it will render into other visuals. <strong>long text</strong> Is a replacement for a very long array that holds the information for that certain item identity.</p>
  
  <p><strong>Now to the problem, I want to convert my JSON data into ul and li elements</strong>. Like this:</p>
  
  <pre><code> &lt;ul&gt;
      &lt;li&gt;France&lt;/li&gt;
      &lt;ul&gt;
          &lt;li&gt;Baguette&lt;/li&gt;
          &lt;li&gt;Nocco&lt;/li&gt;
          &lt;li&gt;Red Wine&lt;/li&gt;
      &lt;/ul&gt;
      &lt;li&gt;Germany&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I've found many solutions to this kind of problem on the web but nothing seems to fit my needs. </p>
  
  <p>Can anyone help me with a working code snippet?</p>
  
  <p>Thanks in advance</p>