JSON data into HTML list that looks like a table

Question

Have nested JSON array and currently trying to create a HTML list ul/li type that also resembles a table.

Here is my JSON data, questions is name of object.

{
  "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"
    }
  ]
}

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?).

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 );

......

<div id="test"></div>

So if anyone has an idea let me know.

Adding how table-like structure should look like:

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?

Answer 1

Here is a simple prototype function to get you started.

var Menu = function (data) {
    this.data = data;
};

Menu.prototype.render = function (root) {
    var ul = $("<ul></ul>");
    var li = $("<li></li>");
    li.append($("<a></a>", {
        url: this.data.id,
        text: this.data.question
    })).appendTo(ul);
    ul.appendTo(root);
    if (this.data.subquestions) {
        Menu.renderMenus(this.data.subquestions, $("<li></li>").appendTo(ul));
    }
};

Menu.renderMenus = function (menus, root) {
    $.each(menus, function (key, val) {
        var m = new Menu(val);
        m.render(root);
    });
}

Menu.renderMenus(aaData, $("#test"));

DEMO

You can obviously add more fields to the data where needed.

UPDATE

Per your request to have the nested lists collapsible as seen here, I've updated the my original code as well as made some modifications to the code on the site you referenced.

UPDATED DEMO