从 JSON 创建动态响应的 htmltable

Question

我正在尝试从 Json 对象 动态创建表。但是无法以正确的格式创建表格。

[
  {
    "name" : "water",
    "solutions" : [ 
      {
        "cost" : "200-300 INR",
        "difficulty" : [1,0,0,0,0],
        "image" : "Cover.png",
        "message" : "Save 40% of water being released from your taps",
        "title" : "Optimise!",
        "description" : " flow.",
        "data" : [
          {
            "step" : 1,
            "content" : [
              {
                "message" : "Collect the following materials.",
                "image" : "0.JPG"
              },
              {
                "alert" : "Measure your tap diameter ",
                "image" : "1.JPG"
              }
            ] 
          },
          {
            "step" : 2,
            "content" : [
              {
                "message" : " hand",
                "image" : "2.JPG"
              },
              {
                "image" : "3.JPG"
              }
            ]
          },
          {
            "step" : 3,
            "content" : [
              {
                "message" : " deposits",
                "image" : "/4.JPG"
              }
            ] 
          },
          {
            "step" : 4,
            "content" : [
              {
                "message" : "tap!",
                "image" : "5.JPG"
              },
              {
                "image" : "6.JPG"
              },
              {
                "image" : "7.JPG"
              },
              {
                "image" : "8.JPG"
              },
              {
                "alert": " tap."
              }
            ] 
          }
        ]
      },

等等，以我从服务器获取 Json 的相同格式，但是我只需要在 JSON 中显示“解决方案”。

我写的脚本

function loadDoc() {
        $.getJSON("/solutions" + , function(result, status, jqXHR) {
        var myList = (jqXHR.responseText);
        myList = JSON.parse(myList);
        var columns =[];
        columns = addAllColumnHeaders(myList);
        var table = document.getElementById("excelDataTable");
        var body = table.createTBody();
        for (var i = 0; i < myList.length; i++) {
            var row = body.insertRow();
            for (var colIndex = 0; colIndex < columns.length; colIndex++) {
              var cellValue = myList[i][columns[colIndex]];
              if (cellValue == null) cellValue = "";
              var cell = row.insertCell();
              cell.innerHTML = cellValue;
            }
          }
        });
    }


    function addAllColumnHeaders(myList) {
        $("#excelDataTable").html(""); 
        var columnSet = [];
        var table = document.getElementById("excelDataTable");
        var header = table.createTHead();
        var row = header.insertRow();
        for(var k in myList[0]) {
            if(k != "level"){
            columnSet.push(k);
            var cell = row.insertCell();
            cell.innerHTML = k;
            }
        }
        return columnSet;
    }

所有数据必须以表格形式显示的格式是...

每个解决方案都有一行（标题、消息、描述、...、数据）。该行中具有其他描述性数据（步骤）的数据列可以有多行。您可以将多行合并到一行中。单击数据单元格必须显示所有信息。

如何执行此操作？

Answer 1

试试这样的：

function loadDoc() {
    $.getJSON("/solutions" + , function(result, status, jqXHR) {
    var myList = (jqXHR.responseText);
    myList = JSON.parse(myList);
    var columns =[];
    columns = addAllColumnHeaders(myList);
    var table = document.getElementById("excelDataTable");
    var body = table.createTBody();
    for (var i = 0; i < myList.length; i++) {
        var row = body.insertRow();
        for (var colIndex = 0; colIndex < columns.length; colIndex++) {
          var cellValue = myList[i][columns[colIndex]];
          if (cellValue == null) cellValue = "";
          var cell = row.insertCell();
          if (columns[colIndex] == 'name') {
              cell.innerHTML = cellValue;
          }
          else if (columns[colIndex] == 'solutions') {
              var contents = '';
              for (x in cellValue) {
                  contents += '<div><span>' + x + '</span><span>' + cellValue[x] + '</span></div>'; 
              }
              cell.innerHTML = contents;
          }
        }
      }
    };
} 

这将一直有效，直到您深入到 data 属性，然后您将不得不执行另一个 for 循环。