JSON数据转换为看起来像表格的HTML列表

Question

已经嵌套了JSON数组，目前正在尝试创建一个类似于表的HTML列表ul/li类型。

这是我的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 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"
}
]
}

这是我的代码，我只想让问题和答案显示在行中，而不是每个元素中。我也想让它看起来像一张表，但有正确的缩进(twitter引导程序？)。

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>

所以，如果有人有想法，请告诉我。

添加表状结构的外观：

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

这里有一个简单的原型函数可以帮助您入门。

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

演示

显然，您可以在需要的地方向数据中添加更多字段。

更新

根据您的请求，如图所示，嵌套列表是可折叠的，我已经更新了我的原始代码，并对您引用的网站上的代码进行了一些修改。

更新演示