title: JavaScript: Recursive function to create nested UL
body: <p>I've been trying to create a nested UL from the following data:</p>
  
  <pre><code>[{"unique_id" : "UFID-06", "level" : "-3"}, 
   {"unique_id" : "UFID-05", "level" : "-2"}, 
   {"unique_id" : "UFID-04", "level" : "-1"}, 
   {"unique_id" : "UFID-03", "level" : "1"}, 
   {"unique_id" : "UFID-02", "level" : "2"},
   {"unique_id" : "UFID-01", "level" : "3"}];
  </code></pre>
  
  <p>But I'm getting a "too much recursion" message in FireBug.</p>
  
  <p>I'm hoping someone may be able to spot where I'm going wrong in the following:</p>
  
  <pre><code>function process(data) {    
      var childDiv = document.createElement('div');
      for (var i in data) {
          var unique_id = data[i].unique_id;
          var level = data[i].level;
  
          var ul  = document.createElement('ul');
          var li  = document.createElement('li');
          var txt = document.createTextNode(unique_id + ' : ' + level);
  
          li.appendChild(txt);
          ul.appendChild(li);
          li.appendChild(txt);
  
          childDiv.appendChild(ul);
          process(data[i]);
      }
      return childDiv;
  }
  </code></pre>
  
  <p>Here is a fiddle ( <a href="https://jsfiddle.net/rt4gL1ff/2/" rel="nofollow">https://jsfiddle.net/rt4gL1ff/2/</a> ). Note that the following line is commented-out, as it will cause the "too much recursion" error when it is executed.</p>
  
  <pre><code>//parentDiv.appendChild(process(obj));
  </code></pre>
  
  <p>Thanks much!</p>