title: Render array of objects as tree
body: <p>I have an array of objects in which each element contains a string representing its position in a tree structure. What would be a simple way to generate a tree view (using basic <code>ul</code>/<code>li</code> tags for example) based on that data?</p>
  
  <p>The depth of the tree structure isn't known beforehand so probably recursion would be the solution?</p>
  
  <p>I'm using React but I guess the question isn't really React-specific so generic JS or even pseudo-code would help a lot.</p>
  
  <p>Example data:</p>
  
  <pre><code>[
      {
          "name":  "banana",
          "path": "food.healthy.fruit",
          // ... may contain other parameters
      },
      {
          "name":  "apple",
          "path": "food.healthy.fruit"
      }
      {
          "name":  "carrot",
          "path": "food.healthy.vegetable"
      },
      {
          "name":  "bread",
          "path": "food"
      },
      {
          "name":  "burger"
          "path": "food.unhealthy"
      },
      {
          "name":  "hotdog"
          "path": "food.unhealthy"
      },
      {
          "name": "germany",
          "path": "country.europe"
      },
      {
          "name": "china",
          "path": "country.asia"
      }
  ]
  </code></pre>
  
  <p>Desired result:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
      food
      &lt;ul&gt;
          &lt;li&gt;bread&lt;/li&gt;
          &lt;li&gt;healthy
          &lt;ul&gt;
              &lt;li&gt;
              fruit
              &lt;ul&gt;
                  &lt;li&gt;apple&lt;/li&gt;
                  &lt;li&gt;banana&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
              vegetable
              &lt;ul&gt;
                  &lt;li&gt;carrot&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
          unhealthy
          &lt;ul&gt;
              &lt;li&gt;burger&lt;/li&gt;
              &lt;li&gt;hotdog&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
      country
      &lt;ul&gt;
          &lt;li&gt;
          europe
          &lt;ul&gt;
              &lt;li&gt;germany&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
          asia
          &lt;ul&gt;
              &lt;li&gt;china&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <ul>
      <li>
      food
      <ul>
          <li>bread</li>
          <li>healthy
          <ul>
              <li>
              fruit
              <ul>
                  <li>apple</li>
                  <li>banana</li>
              </ul>
              </li>
              <li>
              vegetable
              <ul>
                  <li>carrot</li>
              </ul>
              </li>
          </ul>
          </li>
          <li>
          unhealthy
          <ul>
              <li>burger</li>
              <li>hotdog</li>
          </ul>
          </li>
      </ul>
      </li>
      <li>
      country
      <ul>
          <li>
          europe
          <ul>
              <li>germany</li>
          </ul>
          </li>
          <li>
          asia
          <ul>
              <li>china</li>
          </ul>
          </li>
      </ul>
      </li>
  </ul>