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

<tbody id="metadata">
  <tr>
    <td><input type="numeric" /></td>
    <td><input type="numeric" /></td>
  </tr>
  <tr>
    <td><input type="numeric" /></td>
    <td><input type="numeric" /></td>
  </tr>
  <tr>
    <td><input type="numeric" /></td>
    <td><input type="numeric" /></td>
  </tr>
</tbody>

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}]

Using .querySelectorAll() for such trivial queries only hurts the performance of your app, document.getElementById() or document.getElementsByTagName() would work faster. — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Jan 10, 2021 at 16:00
assuming your tableData variable has to store <tbody>-node, you got missing '#' and are supposed to use .querySelector() (not 'all'). I.e. .document.querySelector('#metadata') — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Jan 10, 2021 at 16:02
Once captured <tbody> you need to do further nested queries to capture <tr>, <td> nodes (to drill down to the values of nested <input>-nodes) — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Jan 10, 2021 at 16:04
@YevgenGorbunkov - What, in precise time, is the performance deficit? IMO your comment is too pedantic and will have what amounts to almost zero impact on the performance of this code. (Most likely in the sub-microsecond range on even the most constrained CPU. — Randy Casburn
– Randy Casburn, Commented Jan 10, 2021 at 16:05
i already tried that .document.querySelector('#metadata') but its not working — PURU
– PURU, Commented Jan 10, 2021 at 16:05

lissettdm · Accepted Answer · 2021-01-10 16:43:36Z

4

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);
});

<table>
  <tbody id="metadata">
    <tr>
      <td><input type="numeric"></td>
      <td><input type="numeric"></td>
    </tr>
    <tr>
      <td><input type="numeric"></td>
      <td><input type="numeric"></td>
    </tr>
    <tr>
      <td><input type="numeric"></td>
      <td><input type="numeric"></td>
    </tr>
  </tbody>
</table>
<button>Get Data</button>

edited Jan 10, 2021 at 16:43

answered Jan 10, 2021 at 16:25

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

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

5 Comments

Randy Casburn Over a year ago

A good answer, could probably use some explanation. But I struggled with the fact the OP provided no elements within the rows that have text content. The only thing there are input elements. Yet the OP’s code suggests otherwise. OP should clarify the question a bit.

PURU Over a year ago

This always gives me undefined value when I have vale inside of input box

soimon Over a year ago

That is because the code is only called once at the beginning of the snippet, you should put it in a function that runs on a button press or on change of the fields.

PURU Over a year ago

i put this in function then only I tried

soimon Over a year ago

I would generally advise against hard coding the DOM in your JS though: if you add other elements in your <td> it suddenly doesn't work anymore without there being red flags that you shouldn't alter the structure.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related