Datos JSON en la lista HTML que parece una tabla

Tenga una matriz JSON anidada y actualmente está intentando crear una lista HTML de tipo ul / li que también se parece a una tabla.

Aquí están mis datos JSON, preguntas es el nombre del objeto.

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

Y aquí está mi código, solo quiero que la pregunta y la respuesta aparezcan dentro de las filas, no en todos los elementos. Y también me gustaría que se viera como una mesa pero con las muescas correctas (¿bootstrap de 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 ); 

……

 

Así que si alguien tiene una idea, hágamelo saber.

Añadiendo cómo debería ser la estructura de tabla:

 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? 

Aquí hay una función prototipo simple para comenzar.

 var Menu = function (data) { this.data = data; }; Menu.prototype.render = function (root) { var ul = $("
    "); var li = $("
  • "); li.append($("", { url: this.data.id, text: this.data.question })).appendTo(ul); ul.appendTo(root); if (this.data.subquestions) { Menu.renderMenus(this.data.subquestions, $("
  • ").appendTo(ul)); } }; Menu.renderMenus = function (menus, root) { $.each(menus, function (key, val) { var m = new Menu(val); m.render(root); }); } Menu.renderMenus(aaData, $("#test"));

    MANIFESTACIÓN

    Obviamente, puede agregar más campos a los datos donde sea necesario.

    ACTUALIZAR

    Según su solicitud para que las listas anidadas se puedan plegar como se ve aquí , he actualizado mi código original y he realizado algunas modificaciones en el código del sitio al que hace referencia.

    DEMO ACTUALIZADA