title: JavaScript: Building a HTML table from a nested JSON
body: <p>I have a problem building a HTML table from the following JSON</p>
  
  <pre><code>[ 
    { 
      "size" : 167, 
      "price" : 453400, 
      "type" : "Neubau", 
      "children" : false
    }, 
    { 
      "size" : 167, 
      "price" : 453400, 
      "type" : "Neubau", 
      "children" : false
    }, 
    { 
      "size" : 167, 
      "price" : 453400, 
      "type" : "Neubau", 
      "children":[
        { 
          "size" : 167, 
          "price" : 453400, 
          "type" : "Neubau", 
          "children" : false
        },
        { 
          "size" : 167, 
          "price" : 453400, 
          "type" : "Neubau",
          "children" : false
        }  
      ]
    }, 
    { 
      "size" : 167, 
      "price" : 453400, 
      "type" : "Neubau", 
      "children" : false
    }
  ]
  </code></pre>
  
  <p>when fed into these functions</p>
  
  <pre><code>function getRowHTML(dataObject, type) {
    cycles = dataObject.length;
    var markup = '';
    for (var i=0; i &lt; cycles; i++) {
      // different markup for each line
      switch (type) {
        case 'size':
          markup += ' &lt;td&gt;' + dataObject[i].size + '&lt;/td&gt;';
          break;
        case 'price':
          markup += ' &lt;td&gt;' + addDots(dataObject[i].price) + '&amp;euro; &lt;/td&gt;';
          break;
        case 'type':
          markup += ' &lt;td&gt;' + dataObject[i].type + '&lt;/td&gt;';
          break; 
      }
  
      // Check if an object has children and insert children HTML as well
      if (dataObject[i].children) {
        markup += getRowHTML(dataObject[i].children,type);
      }
    }
    return markup;
  }
  
  function getHTML(data) {
    var markup = '&lt;table&gt;';
  
    markup += '&lt;tr class="odd"&gt;' + getRowHTML(data,'size') + '&lt;/tr&gt;';
    markup += '&lt;tr class="even"&gt;' + getRowHTML(data,'price') + '&lt;/tr&gt;';
    markup += '&lt;tr class="odd"&gt;' + getRowHTML(data,'type') + '&lt;/tr&gt;';
  
  
    markup += '&lt;/table&gt;';
  
    return markup;
  }
  </code></pre>
  
  <p>Everything works fine until I add the check for children and the corresponding recursive function call.</p>
  
  <p>Then the result are the first two objects and the children but the last one won't be in the table. Any ideas?</p>