更新的

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

所以如果有人有想法让我知道。

添加表格式结构的样子：

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

DEMO

显然，您可以根据需要向数据添加更多字段。

更新的

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

将JSON数据放入看起来像表的HTML列表中

1 个答案:

DEMO

更新的

UPDATED DEMO