title: JSON data into HTML list that looks like a table
body: <p>Have nested JSON array and currently trying to create a HTML list ul/li type that also resembles a table. </p>
  
  <p>Here is my JSON data, questions is name of object.</p>
  
  <pre><code>{
    "aaData": [
      {
        "id": "1",
        "template_id": "1",
        "question": "Is government stable?",
        "answer": "Stable",
        "parent_question_id": "0",
        "section_id": "2",
        "subquestions": [
          {
            "id": "2",
            "template_id": "1",
            "question": "Is there funding approved?",
            "answer": "Since March 2013",
            "parent_question_id": "1",
            "section_id": "2",
            "subquestions": [
              {
                "id": "3",
                "template_id": "1",
                "question": "How much funding do we have?",
                "answer": "120 Million",
                "parent_question_id": "2",
                "section_id": "1"
              },
              {
                "id": "4",
                "template_id": "1",
                "question": "Do we have all raw materials available?",
                "answer": "Not all, need to find correct type of wood.",
                "parent_question_id": "2",
                "section_id": "1"
              },
              {
                "id": "5",
                "template_id": "1",
                "question": "What currency is the funding in?",
                "answer": "GBP",
                "parent_question_id": "2",
                "section_id": "1"
              },
              {
                "id": "6",
                "template_id": "1",
                "question": "When will the currency be paid?",
                "answer": "7 days after invoice",
                "parent_question_id": "2",
                "section_id": "1"
              },
              {
                "id": "13",
                "template_id": "1",
                "question": "why do we do this?",
                "answer": null,
                "parent_question_id": "2",
                "section_id": "1"
              }
            ]
          },
          {
            "id": "7",
            "template_id": "1",
            "question": "What groups are going to investigate?",
            "answer": null,
            "parent_question_id": "1",
            "section_id": "2",
            "subquestions": [
              {
                "id": "8",
                "template_id": "1",
                "question": "What employees have clearance to go?",
                "answer": null,
                "parent_question_id": "7",
                "section_id": "1"
              },
              {
                "id": "9",
                "template_id": "1",
                "question": "Do employees have passports?",
                "answer": null,
                "parent_question_id": "7",
                "section_id": "1",
                "subquestions": [
                  {
                    "id": "10",
                    "template_id": "1",
                    "question": "Are employees able to travel?",
                    "answer": null,
                    "parent_question_id": "9",
                    "section_id": "1"
                  },
                  {
                    "id": "11",
                    "template_id": "1",
                    "question": "Can employees enter without VISA?",
                    "answer": null,
                    "parent_question_id": "9",
                    "section_id": "1"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "id": "12",
        "template_id": "1",
        "question": "Is market good?",
        "answer": null,
        "parent_question_id": "0",
        "section_id": "2"
      }
    ]
  }
  </code></pre>
  
  <p>And here is my code, i want just question and answer to show up inside the rows not every element. And would also like to having it looking like a table but with the correct indentations (twitter bootstrap?).</p>
  
  <pre><code>function buildHtml( obj , ul ) {
  
              for (i in obj) {
  
                  console.log(obj[i]);
                  //if(i == "question") {
                      var li = document.createElement('li');
                      li.innerHTML = obj[i];
                      li.className = "list-group-item";
                      //li.style.display = "table-cell";
                      ul.appendChild( li );
                      ul.className = "list-group";
                      //ul.style.display = "table-row";
  
                      if ( typeof(obj[i])== "object" ) {
  
                          var childUl = document.createElement('ul');
                          li.appendChild( childUl ); 
  
                          buildHtml(obj[i], childUl );            
                      } 
                  //} 
  
              }
  
  
          } 
          var ul = document.createElement('ul');
          ul.className = "list-group";
          //ul.style.display = "table-row";
          buildHtml( questions ,ul );
          var div = document.getElementById('test');    
          div.appendChild( ul );
  </code></pre>
  
  <p>......</p>
  
  <pre><code>&lt;div id="test"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>So if anyone has an idea let me know.</p>
  
  <p>Adding how table-like structure should look like:</p>
  
  <pre><code>Is government stable? Stable
       Is there funding approved? Since March 2013
             How much funding do we have? 120 Million
             Do we have all raw materials available? Not all, need to find correct type of wood.
             What currency is the funding in? GBP
             When will the currency be paid? 7 days after invoice
             why do we do this?
       What groups are going to investigate?
             What employees have clearance to go?
             Do employees have passports?
                  Are employees able to travel?
                  Can employees enter without VISA?
  Is market good?
  </code></pre>