在 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 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) {  //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       [e-mail][e-mail]预期输出：ID     EMAIL1002   [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 = [

    '<table border="1"><thead>', 

    ...Object.keys(data[0]).map(key => `<th>${key}</th>`),

    '</thead><tbody>', 

    ...data.map(item => `<tr><td>${item.ID}</td><td>${item.EMAIL}</td></tr>`),

    '</tbody></table>']

  .join("")

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

Answer 2

问题是您在插入新单元格时创建新行，请尝试我们创建一行的地方

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

      row = table.insertRow(-1);

      cell = row.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 = row.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>

Answer 3

您正在为所有键创建行，将行移动到外循环中

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

var row =  table.insertRow(-1);

  //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 =row.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 = row.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>