How to create array of object from HTML Table in javascript?

Question

How can I create an array of objects from an HTML table body? This is how my HTML looks like

here is what I tried this javascript to get all the values from the table cell in an array of objects. I don't understand why my cMetadata always return a blank array

let cMetadata;
if (document.querySelectorAll("metadata")) {
  let tableData = document.querySelectorAll("metadata");
  cMetadata = [...tableData].map((row) => {
    return {
      altions: row.cells[0].textContent,
      lexity: row.cells[1].textContent,
    };
  });
}

final array of object should look like

cMetadata = [{altions: 1 , lexity: 2},{altions: 2 , lexity: 2},{altions: 3 , lexity: 2}]

user_14349808 · Answer

Verified that you have the tbody node inside a table node. You can get the items with document.querySelectorAll("#metadata tr"):

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  const elements = document.querySelectorAll("#metadata tr");
  const result = Array.from(elements).map(tr => {
    const childs = tr.querySelectorAll("input");
    return {
      p1: childs[0].value,
      p2: childs[1].value
    };
  });

  console.log(result);
});

How to create array of object from HTML Table in javascript?

1 Answers