在 HTML 表格中绑定 JSON 数据

Question

我正在尝试导入 excel 数据并最终将其绑定到HTML 表。目前，它可以工作，但我对数据绑定进行了轻微更改，不幸的是无法按预期绑定数据。这是到目前为止我尝试过的带有示例jSon 数据的代码 sn-p：

var data = [{
    ID: "1002",
    EMAIL: "hello@sample.com"
  },
  {
    ID: "1004",
    EMAIL: "hello2@sample.com"
  },
  {
    ID: "1006",
    EMAIL: "hello3@sample.com"
  },
  {
    ID: "1008",
    EMAIL: "hello4@sample.com"
  }
];

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
hello@abc.com
1004
hello2@abc.com

预期输出：

ID     EMAIL
1002   hello@abc.com
1004   hello2@abc.com

Answer 1

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

var data = [{
    ID: "1002",
    EMAIL: "hello@sample.com"
  },
  {
    ID: "1004",
    EMAIL: "hello2@sample.com"
  },
  {
    ID: "1006",
    EMAIL: "hello3@sample.com"
  },
  {
    ID: "1008",
    EMAIL: "hello4@sample.com"
  }
];

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 2

正如其他人已经说过的，您需要移动行创建

这是一个更简单的版本

var data = [
{ ID: "1002", EMAIL: "hello@sample.com" },
{ ID: "1004", EMAIL: "hello2@sample.com"},
{ ID: "1006", EMAIL: "hello3@sample.com"},
{ ID: "1008", EMAIL: "hello4@sample.com"}
];

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 3

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

var data = [{
    ID: "1002",
    EMAIL: "hello@sample.com"
  },
  {
    ID: "1004",
    EMAIL: "hello2@sample.com"
  },
  {
    ID: "1006",
    EMAIL: "hello3@sample.com"
  },
  {
    ID: "1008",
    EMAIL: "hello4@sample.com"
  }
];

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>