从复杂的 JSON 生成 HTML 表格答案

【问题标题】：Generate HTML table from intricate JSON从复杂的 JSON 生成 HTML 表格
【发布时间】：2015-11-18 17:22:09
【问题描述】：

我有一些 JSON 数据，我希望生成一个漂亮的 HTML 表格，用于查看某人在测试中的表现的统计数据。在我的 JSON 数据中，我按姓名对每个学生进行了分组，并将他们的分数放入 JSON 数组中。

使用像 { "Name" : "Alfreds Futterkiste", "City" : "Berlin", "Country" : "Germany" } 这样更简单的 JSON 会容易得多，因为我可以为每个 JSON 对象生成一个 <td>。

所以要明确一点：我需要一种方法将对象放在嵌套数组中的每个 <tr> 中。

我的 PHP 生成的 JSON 如下所示：

[  
   {  
      "school":"St. Paul"
   },
   {  
      "class":"4a"
   },
   {  
      "student":"Andreas",
      "taskid":[  
         2,
         1
      ],
      "level":[  
         3,
         4
      ],
      "hint":[  
         1,
         0
      ],
      "correctanswer":[  
         1,
         1
      ],
      "timeused":[  
         30,
         20
      ]
   }
]

有没有简单的方法来制作这样的表格？我愿意接受任何设置相对简单的库。

学生 x

____________________________________________
|#taskid|level|hint|correctanswer|time used|
|‾‾‾‾‾‾‾|‾‾‾‾‾|‾‾‾‾|‾‾‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾‾‾‾‾|
|‾‾‾‾‾‾‾|‾‾‾‾‾|‾‾‾‾|‾‾‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾‾‾‾‾|
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾

【问题讨论】：

JSON values into HTML table的可能重复
@GSWV 我看不出它们有何相同之处。你注意到所有的数组了吗？
在这种情况下，“可能重复”标志的目的是引导您注意实现所需内容的正确方式，并可能防止冗余。如果您阅读并理解了我发布的问题和答案，那么您将看到 OP 试图完成的工作并将其轻松应用于您的情况，您应该查看答案中发布的link。

标签： javascript json html-table

【解决方案1】：

我有一个答案，下面是它的测试运行，花了我 4 个小时，只使用了 JavsScript 没有第三方库，如 jquery 等。你可以进一步即兴发挥。享受吧。

  var jsonData = [{
    "school": "St. Paul"
  }, {
    "class": "4a"
  }, {
    "student": "Natalie",
    "taskid": [
      3,
      4
    ],
    "level": [
      1,
      2
    ],
    "hint": [
      1,
      6
    ],
    "correctanswer": [
      1,
      4
    ],
    "timeused": [
      30,
      10
    ]
  }, {
    "school": "St. Paul"
  }, {
    "class": "4a"
  }, {
    "student": "Andreas",
    "taskid": [
      2,
      1
    ],
    "level": [
      3,
      4
    ],
    "hint": [
      1,
      0
    ],
    "correctanswer": [
      1,
      1
    ],
    "timeused": [
      30,
      20
    ]
  }]

  for (var i = 0; i < jsonData.length; i++) {
    var nodeTable = document.createElement("table");
    var nodeTbody = document.createElement("tbody");

    for (var x = 0; x < Object.keys(jsonData[i]).length; x++) {
      var headerText = document.createTextNode(Object.keys(jsonData[i])[x]);
      var nodeTH = document.createElement("th");
      nodeTH.appendChild(headerText);
      document.getElementById("schoolRecord").appendChild(nodeTable).appendChild(nodeTbody).appendChild(nodeTH);
    }
    var maxLength = [];
    for (var x = 0; x < Object.keys(jsonData[i]).length; x++) {

      for (var z = 0; z < jsonData[i][Object.keys(jsonData[i])[x]].length; z++) {
        if (typeof(jsonData[i][Object.keys(jsonData[i])[x]]) !== 'string') {
          maxLength.push(jsonData[i][Object.keys(jsonData[i])[x]].length);
        }
      }
    }
    if (maxLength.length > 0) {
      maxLength = Math.max.apply(Math, maxLength);
    }
    if (maxLength.length === undefined) {
      for (var z = 0; z < maxLength; z++) {
        var nodeTR = document.createElement("tr");
        nodeTbody.appendChild(nodeTR);
        createTD(z);
      }
    } else {
      var nodeTR = document.createElement("tr");
      nodeTbody.appendChild(nodeTR);
      createTD();
    }

    function createTD(nodeValue) {
      for (var x = 0; x < Object.keys(jsonData[i]).length; x++) {
        if (typeof(jsonData[i][Object.keys(jsonData[i])[x]]) === 'string') {
          var tdText = document.createTextNode(jsonData[i][Object.keys(jsonData[i])[x]]);
          var nodeTD = document.createElement("td");
          nodeTD.appendChild(tdText);
          nodeTR.appendChild(nodeTD);
        } else {
          var tdText = document.createTextNode(jsonData[i][Object.keys(jsonData[i])[x]][nodeValue]);
          var nodeTD = document.createElement("td");
          nodeTD.appendChild(tdText);
          nodeTR.appendChild(nodeTD);
        }
      }
    }

  }

table th,

table td {

  border: 1px solid black;

  border-collapse: collapse;

}

<div id="schoolRecord">

</div>

【讨论】：