CODEWITHSUNDEEP
javascripthtml-tablekey
Valentin Massart
Valentin Massart

Reputation: 45

Javascript ; dynamically generated table from array of objects : how to add keys as classes for the data cells

I am building a dynamic table from an array of objects. Each row corresponds to one object, and each cell in that row corresponds to the value of one property for the object. All the objects have the same list of properties.

What I want to do is to add the keys as classes to the generated table cells, in order to add a switch to hide/show columns to toggle VAT.

Here is what my array looks like

let array = [
  {
    category: "Category",
    product: "Product",
    withVAT: "Price including VAT",
    withoutVAT: "Price excluding VAT",
  },
  {
    category: "Rouges",
    product: "Chevigny Vaucluse",
    withVAT: "4,40 €",
    withoutVAT: "3,64 €",
  },
  {
    category: "Rouges",
    product: "Terra Quantum C.Rhône 2018 BIO",
    withVAT: "9,30 €",
    withoutVAT: "7,69 €",
  },
...
]

And here is my dynamically generated table in JS :

document.onload(generateDynamicTable());

function generateDynamicTable() {
  if (array.length > 0) {
    // Table style
    let table = document.createElement("table");

    // Retrieve column header
    let columns = [];
    for (i = 0; i < array.length; i++) {
      for (key in array[i]) {
        if (columns.indexOf(key) === -1) {
          columns.push(key);
        }
      }
    }

    // TABLE HEAD
    // Create table head
    let tableHead = document.createElement("thead");
    // Create row for table head
    let tableHeadRow = document.createElement("tr");
    // Create cells for table head
    for (i = 0; i < columns.length; i++) {
      let tableHeadCell = document.createElement("th");
      tableHeadCell if (array.length > 0.innerHTML = columns[i];
      tableHeadRow.appendChild(tableHeadCell);
    }

    // TABLE BODY
    // Create table body
    let tableBody = document.createElement("tbody");
    // Create rows for each object in the array
    for (i = 0; i < array.length; i++) {
      let tableRow = document.createElement("tr");
      // Create cells for each row
      for (j = 0; j < columns.length; j++) {
        let tableCell = document.createElement("td");
        tableCell.innerHTML = array[i][columns[j]];
        tableRow.appendChild(tableCell);
      }
      tableBody.appendChild(tableRow);
    }
    table.appendChild(tableBody);

    // Add table to a container
    document.getElementById("dynamicTable").innerHTML = "";
    document.getElementById("dynamicTable").appendChild(table);
  }
}

Upvotes: 1

Views: 1191

Answers (2)

Victor Singha
Victor Singha

Reputation: 11

Create a div in html

<div id="DynamicTable"></div>

Pass the List of Objects u have in this function.

let yourList = [{....}];
this.createtable(yourList,"DynamicTable");

createtable(list: any,id:any) {
    let headers = Object.keys(list[0])
    let table = '<table><thead><tr>'
    headers.forEach((header:any)=>{
      table = table+ `<th>${header}</th>`
    })
    table = table + `</tr></thead>`;
    table = table + `<tbody>`;
    list.forEach((data:any) => {
      table = table + `<tr>`
      headers.forEach((header:any)=>{
         table = table + `<td>${data[header]}</td>`;
      })
      table = table + `</tr>`
    });
    table = table + `</tbody></table>`
    let DynamicTable: any = document.getElementById(id)
    DynamicTable.innerHTML = table;
  }

For keys as Class name

  table = table + `<td class="${header}">${data[header]}</td>`;

Upvotes: 0

Valentin Massart
Valentin Massart

Reputation: 45

These 2 lines worked :

// create an array with the keys of the properties for the object "array[i]"
let keys = Object.keys(array[i]);
// add the property key to the table cell's classes
tableCell.classList.add(keys[j]);

They have to be added here :

// Create cells for each row
      for (j = 0; j < columns.length; j++) {
        let tableCell = document.createElement("td");
        tableCell.innerHTML = array[i][columns[j]];
        let keys = Object.keys(array[i]);
        tableCell.classList.add(keys[j]);
        tableRow.appendChild(tableCell);
      }

Upvotes: 2

Related Questions