带有来自JSON嵌套数据的递归子行的HTML表

Question

因此尝试基于嵌套的JSON结构创建HTML表。想要拥有父行，当单击它们时，它们会打开子行，当单击这些子行时，它们会打开更多的子行，依此类推。从孩子到他们的父母的一个很好的缩进将是伟大的。

这是我的JSON数据，来自问题对象：

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

然后我编写了这个，我得到一个表，但不知道如何父/子行。这是我到目前为止所做的。

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