How to add table row from array of objects in javascript?

Question

How can we create table row using JavaScript

I was trying to create table row from array of objects in javascript using map function but somehow its throwing error

    const renderTableData = (result) => {
            return result.map((item, index) => {
                return (
                    <tr>
                        <td >item.Name</td>
                        <td >item.Date</td>
                        <td >item.state</td>
                    </tr>
                )
            })
        }


    const dataBinding = (result) => {
        let x = document.getElementById("tableSection");
        x.innerHTML = renderTableData(result);
    }

my html <table> <tbody id = "tableSection"> </tbody></table>

Does this answer your question? [Generate HTML table from 2D JavaScript array](https://stackoverflow.com/questions/15164655/generate-html-table-from-2d-javascript-array) — flaxel, Sep 21 '20 at 17:07
would be useful if you would add which error it throws and a mock 'result' array of objects — Mihai T, Sep 21 '20 at 17:12

Fdr · Answer 1 · 2020-09-22T05:47:08.640

You should use a template string

const renderTableData = (result) => {
  return result.map((item, index) => {
    return `<tr>
              <td >${item.Name}</td>
              <td >${item.Date}</td>
              <td >${item.state}</td>
          </tr>`;
  }).join('');
};

const dataBinding = (result) => {
  let x = document.getElementById("tableSection");
  x.innerHTML = renderTableData(result);
};
dataBinding([
  { Name: "first", Date: "2020-09-21", state: "USA" },
  { Name: "first", Date: "2020-09-21", state: "USA" },
  { Name: "first", Date: "2020-09-21", state: "USA" },
]);

<table>
  <tr>
    <th>Name</th>
    <th>Date</th>
    <th>state</th>
  </tr>
  <tbody id="tableSection"></tbody>
</table>

I used template string as we need to create for each item a multiline string. We could have achieved the same result with normal string but would have been much less readable.


             "<tr>\
                  <td >"+item.Name+"</td>\
                  <td >"+item.Date+"</td>\
                  <td >"+item.state+"</td>\
              </tr>"

After we map over the array of objects we end up with an array of strings. .join('') creates a single string out of that array and removes also the commas(if you set the innerHTML to an array, the commas between the elements will be considered as text to parse).

When you set the innerHTML of an element, the provided string is parsed as HTML. You can read more about it here

What you did on the first place was not valid javascript code, you were using a sort of JSX

I _really_ like the code you've written for this, but "You should use a template string" isn't really an answer to "How to add table row from array of objects…". I think your answer would be better if you _explained_ what your code is doing, _how_ this adds the rows to the table. — Stephen P, Sep 21 '20 at 18:58

How to add table row from array of objects in javascript?

1 Answers1