title: How to create a dynamic html list with recursive function in Javascript (jQuery)
body: <p>I am trying to create an html list with a recursive function in javascript, but I really don't understand why the actual result doesn't match my expect result. </p>
  
  <p><strong>Json</strong></p>
  
  <pre><code>{
      "sections": {
          "1": {
              "name": "Section 1",
              "sections": {
                  "3": {
                      "name": "Section 1.1",
                      "sections": {
                          "4": {
                              "name": "Section 1.1.1",
                              "sections": {}
                          }
                      }
                  }
              }
          },
          "2": {
              "name": "Section 2",
              "sections": {}
          }
      }
  }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$(document).ready(function() {
      generateHtml(myLoadedJson);
  });
  
  function generateHtml(pData) {
      var self = this;
      var html = '';
      if("sections" in pData) {
          html+= '&lt;ul&gt;';
          var objList = Object.keys(pData.sections);
          var nbr = objList.length;
          for(i=0; i&lt;nbr; i++) {
              var key = objList[i];
              var obj = pData.sections[key];
              html+= '&lt;li&gt;&lt;div&gt;' + obj.name + '&lt;/div&gt;'
              html+= generateHtml(pData.sections[key]);
              html+= '&lt;/li&gt;';
          }
          html+= '&lt;/ul&gt;';
      }
      return html;
  };
  </code></pre>
  
  <p><strong>Expected result</strong></p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;div&gt;Section 1&lt;/div&gt; 
      &lt;ul&gt;
        &lt;li&gt;
          &lt;div&gt;Section 1.1&lt;div&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;div&gt;Section 1.1.1&lt;div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div&gt;Section 2&lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Actual result</strong></p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;div&gt;Section 1&lt;/div&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;div&gt;Section 1.1&lt;/div&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;div&gt;section 1.1.1&lt;/div&gt;
              &lt;ul&gt;&lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Anyone have an idea?</p>