在 HTML 表中绑定 json 数据

Question

我正在尝试导入Excel数据并最终将其绑定到HTML表。目前，它可以工作，但我对数据绑定做了轻微的更改，不幸的是无法按预期绑定数据。jSon这是我迄今为止尝试过的包含示例数据的代码片段：

var data = [{

    ID: "1002",

    EMAIL: "[e-mail]"

  },

  {

    ID: "1004",

    EMAIL: "[e-mail]"

  },

  {

    ID: "1006",

    EMAIL: "[e-mail]"

  },

  {

    ID: "1008",

    EMAIL: "[e-mail]"

  }

];

var table = document.createElement("table");

table.border = "1";

var cell = "";

var row = table.insertRow(-1);

//Add the header cells

var headerCell = document.createElement("TH");

headerCell.innerHTML = ("ID");

row.appendChild(headerCell);

headerCell = document.createElement("TH");

headerCell.innerHTML = ("EMAIL");

row.appendChild(headerCell);

data.forEach(function(obj) {

  //Get an array of all available keys in current element

  var keys = Object.keys(obj);

  //Loop through all obtained keys

  keys.forEach(function(key) {

    //The following line will match ID/IDS/id/ids

    if (key.toUpperCase().indexOf("ID") > -1) {

      //Add the data cells

      cell = table.insertRow(-1).insertCell(-1);

      cell.innerHTML = obj[key];

      //console.log("found ids: ", obj[key]);

    }

    //The following line will match AMOUNT/AMOUNTS/amount/amounts

    if (key.toUpperCase().indexOf("EMAIL") > -1) {

      //Add the data cells

      cell = table.insertRow(-1).insertCell(-1);

      cell.innerHTML = obj[key];

      //console.log("found emails: ", obj[key]);

    }

  });

});

var dvExcel = document.getElementById("excelTable");

dvExcel.innerHTML = "";

dvExcel.appendChild(table);

<div id="excelTable"></div>

问题是，我拥有的数据采用以下格式：

ID       EMAIL

1002

[e-mail]

1004

[e-mail]

预期输出：

ID     EMAIL

1002   [e-mail]

1004   [e-mail]

Answer 1

正如其他人已经说过的，您需要移动行创建这是一个更简单的版本var data = [{ ID: "1002", EMAIL: "[e-mail]" },{ ID: "1004", EMAIL: "[e-mail]"},{ ID: "1006", EMAIL: "[e-mail]"},{ ID: "1008", EMAIL: "[e-mail]"}];document.getElementById("excelTable").innerHTML = [&nbsp; &nbsp; '<table border="1"><thead>',&nbsp;&nbsp; &nbsp; ...Object.keys(data[0]).map(key => `<th>${key}</th>`),&nbsp; &nbsp; '</thead><tbody>',&nbsp;&nbsp; &nbsp; ...data.map(item => `<tr><td>${item.ID}</td><td>${item.EMAIL}</td></tr>`),&nbsp; &nbsp; '</tbody></table>']&nbsp; .join("")<div id="excelTable"></div>

Answer 2

问题是您在插入新单元格时创建新行，请尝试我们创建一行的地方var data = [{&nbsp; &nbsp; ID: "1002",&nbsp; &nbsp; EMAIL: "[e-mail]"&nbsp; },&nbsp; {&nbsp; &nbsp; ID: "1004",&nbsp; &nbsp; EMAIL: "[e-mail]"&nbsp; },&nbsp; {&nbsp; &nbsp; ID: "1006",&nbsp; &nbsp; EMAIL: "[e-mail]"&nbsp; },&nbsp; {&nbsp; &nbsp; ID: "1008",&nbsp; &nbsp; EMAIL: "[e-mail]"&nbsp; }];var table = document.createElement("table");table.border = "1";var cell = "";var row = table.insertRow(-1);//Add the header cellsvar headerCell = document.createElement("TH");headerCell.innerHTML = ("ID");row.appendChild(headerCell);headerCell = document.createElement("TH");headerCell.innerHTML = ("EMAIL");row.appendChild(headerCell);data.forEach(function(obj) {&nbsp; //Get an array of all available keys in current element&nbsp; var keys = Object.keys(obj);&nbsp; //Loop through all obtained keys&nbsp; keys.forEach(function(key) {&nbsp; &nbsp; //The following line will match ID/IDS/id/ids&nbsp; &nbsp; if (key.toUpperCase().indexOf("ID") > -1) {&nbsp; &nbsp; &nbsp; //Add the data cells&nbsp; &nbsp; &nbsp; row = table.insertRow(-1);&nbsp; &nbsp; &nbsp; cell = row.insertCell(-1);&nbsp; &nbsp; &nbsp; cell.innerHTML = obj[key];&nbsp; &nbsp; &nbsp; //console.log("found ids: ", obj[key]);&nbsp; &nbsp; }&nbsp; &nbsp; //The following line will match AMOUNT/AMOUNTS/amount/amounts&nbsp; &nbsp; if (key.toUpperCase().indexOf("EMAIL") > -1) {&nbsp; &nbsp; &nbsp; //Add the data cells&nbsp; &nbsp; &nbsp; cell = row.insertCell(-1);&nbsp; &nbsp; &nbsp; cell.innerHTML = obj[key];&nbsp; &nbsp; &nbsp; //console.log("found emails: ", obj[key]);&nbsp; &nbsp; }&nbsp; });});var dvExcel = document.getElementById("excelTable");dvExcel.innerHTML = "";dvExcel.appendChild(table);<div id="excelTable"></div>

Answer 3

您正在为所有键创建行，将行移动到外循环中var data = [{&nbsp; &nbsp; ID: "1002",&nbsp; &nbsp; EMAIL: "[e-mail]"&nbsp; },&nbsp; {&nbsp; &nbsp; ID: "1004",&nbsp; &nbsp; EMAIL: "[e-mail]"&nbsp; },&nbsp; {&nbsp; &nbsp; ID: "1006",&nbsp; &nbsp; EMAIL: "[e-mail]"&nbsp; },&nbsp; {&nbsp; &nbsp; ID: "1008",&nbsp; &nbsp; EMAIL: "[e-mail]"&nbsp; }];var table = document.createElement("table");table.border = "1";var cell = "";var row = table.insertRow(-1);//Add the header cellsvar headerCell = document.createElement("TH");headerCell.innerHTML = ("ID");row.appendChild(headerCell);headerCell = document.createElement("TH");headerCell.innerHTML = ("EMAIL");row.appendChild(headerCell);data.forEach(function(obj) {&nbsp; //Get an array of all available keys in current element&nbsp; var keys = Object.keys(obj);var row =&nbsp; table.insertRow(-1);&nbsp; //Loop through all obtained keys&nbsp; keys.forEach(function(key) {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; //The following line will match ID/IDS/id/ids&nbsp; &nbsp; if (key.toUpperCase().indexOf("ID") > -1) {&nbsp; &nbsp; &nbsp; //Add the data cells&nbsp; &nbsp; &nbsp; cell =row.insertCell(-1);&nbsp; &nbsp; &nbsp; cell.innerHTML = obj[key];&nbsp; &nbsp; &nbsp; //console.log("found ids: ", obj[key]);&nbsp; &nbsp; }&nbsp; &nbsp; //The following line will match AMOUNT/AMOUNTS/amount/amounts&nbsp; &nbsp; if (key.toUpperCase().indexOf("EMAIL") > -1) {&nbsp; &nbsp; &nbsp; //Add the data cells&nbsp; &nbsp; &nbsp; cell = row.insertCell(-1);&nbsp; &nbsp; &nbsp; cell.innerHTML = obj[key];&nbsp; &nbsp; &nbsp; //console.log("found emails: ", obj[key]);&nbsp; &nbsp; }&nbsp; });});var dvExcel = document.getElementById("excelTable");dvExcel.innerHTML = "";dvExcel.appendChild(table);<div id="excelTable"></div>