I am trying to import excel data and finally bind it to HTML table. For now, it works but I made a slight change on the data bind and unfortunately unable to bind data as expected. Here’s the code snippet with sample jSon data that I tried so far:

var data = [{
    ID: "1002",
    EMAIL: "[email protected]"
  },
  {
    ID: "1004",
    EMAIL: "[email protected]"
  },
  {
    ID: "1006",
    EMAIL: "[email protected]"
  },
  {
    ID: "1008",
    EMAIL: "[email protected]"
  }
];

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>

The issue is, the data I am having is in the below format:

Expected Output:

Answer

You are creating row for all keys , Move your row in outer loop

var data = [{
    ID: "1002",
    EMAIL: "[email protected]"
  },
  {
    ID: "1004",
    EMAIL: "[email protected]"
  },
  {
    ID: "1006",
    EMAIL: "[email protected]"
  },
  {
    ID: "1008",
    EMAIL: "[email protected]"
  }
];

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>

Write a comment

Your email address will not be published. Required fields are marked *