HTML table with recursive child rows from JSON nested data

Question

So trying to create an HTML table based on a nested JSON structure. Want to have parent rows and when clicked they open children rows and when those children rows are clicked they open further children row and so on. Also a nice indentation from the children to their parents would be great.

Here is my JSON data, which comes from questions 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 2913","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":"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"}]}

I then have coded this, i get a table but no idea on how to parent/child the rows. This is what I have so far.

var html = "<table><thead><tr><th class='dsr_header sorting_disabled'>ID</th><th class='dsr_header sorting_disabled'>Question</th><th class='dsr_header sorting_disabled'>Answer</th></tr><tbody>";
    var parent_question_id = 0;
    var id = 0;
    var parent_question_id_old = 0;
    var id_old = 0;



        //called with every property and it's value // will process every value as individual, must record the parent question id
        function process(key,value) {


            if(key == "id") {
                id = value; // sets current id, we need this for next row to determine if they are a child or not, we will compare with values
            } 
            if(key == "parent_question_id") {
                parent_question_id = value; // sets current parent_question_id, we need this for next row to determine if they are a child or not
            }



                if(typeof(value)=="object" && typeof(key)=="string" && value != null) { // this basically keeps the tr under control
                    html += "</tr><tr>"; // close past one and add new one. Probably good to have a flag so on first time it doesn't mess up
                }

                if(key == "id") {
                    html += "<td>"+value+"</td>";
                }
                if(key == "question") {
                    html += "<td>"+value+"</td>";
                }
                if(key == "answer") {
                    html += "<td>"+value+"</td>";
                }


            parent_question_id_old = parent_question_id;
            id_old = id;


            console.log("<td>"+key+ ": " +value+"</td>");



        }

        function traverse(questions,func) {
            for (var i in questions) {
                func.apply(this,[i,questions[i]]);  
                if (questions[i] !== null && typeof(questions[i])=="object") {

                    traverse(questions[i],func);
                }
            }
        }


        traverse(questions,process);

        html += "</tbody></table>";
        $("#test").html(html);