Unable to add table data in table with JavaScript

Question

I'm trying to make a todo list type web app but unable to add table data in to my table body I've search alot as well as I try to console log every element still this bug is coming in my project. datas, data, element and key all this variable giving expected output but I think my logic is wrong somewhere.

my code is as follows:

let id, name, rank, year, unit, place, incident, photo, add, table;

id = document.getElementById("id");
name = document.getElementById("name");
rank = document.getElementById("rank");
year = document.getElementById("year");
unit = document.getElementById("unit");
place = document.getElementById("place");
incident = document.getElementById("incident");
photo = document.getElementById("photo");
add = document.getElementById("add");
table = document.getElementById("table");

add.addEventListener("click", (e) => {
  e.preventDefault();
  let data = [
    {
      id: id.value,
      name: name.value,
      rank: rank.value,
      year: year.value,
      unit: unit.value,
      place: place.value,
      incident: incident.value,
      photo: photo.value,
    },
  ];
  createTable(data);
});

const createTable = (data) => {
  let datas = Object.keys(data[0]);
  generateTable(table, datas);
  generateTableHead(table, datas);
};

const generateTableHead = (table, data) => {
  let thead = table.createTHead();
  let row = thead.insertRow();
  for (let key of data) {
    let th = document.createElement("th");
    let text = document.createTextNode(key);
    th.appendChild(text);
    row.appendChild(th);
  }
};

const generateTable = (table, data) => {
  for (let element of data) {
    let row = table.insertRow();
    for (key in element) {
      let cell = row.insertCell();
      let text = document.createTextNode(element[key]);
      console.log(element[key]);
      cell.appendChild(text);
    }
  }
};

I'm following following tutorial https://www.valentinog.com/blog/html-table/

Getting following output

fedesc · Accepted Answer · 2020-08-01 06:40:57Z

1

~~try this for...of instead of for...in:~~ REVERT

update

@RahulGurujala after paying more attention to details in the tutorial you are doing, Just change this (explenation below):

const createTable = (data) => {
  let datas = Object.keys(data[0]);
  generateTable(table, datas);
  generateTableHead(table, datas);
};

to this:

const createTable = (data) => {
  let datas = Object.keys(data[0]);
  generateTable(table, data); // notice i'm sending the data array and not only the datas arr with the names only
  generateTableHead(table, datas);
};

You are sending only key name array to both functions (generateTable and generateTableHead) when you need to send key names only to the generateTableHead and data to the generateTable

edited Aug 1, 2020 at 6:40

answered Aug 1, 2020 at 6:06

fedesc

2,6103 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fedesc Over a year ago

@RahulGurujala Check my updated answer. Hope it's helpful

Collectives™ on Stack Overflow

Unable to add table data in table with JavaScript

1 Answer 1

update

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

update

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related