How to put elements of an array into html table rows and columns

Question

I need to put each element of an array into the corresponding table column, but currently it just puts the entire array into the first column. I feel like this solution will be a simple nested for loop but I am unsure, would appreciate any help. Thanks!

index.html

<div id="PersonContainer" class="DBcontainer">
        <form action='/addPerson' method="GET"></form>
        <table class="center" id="personTable">
            <caption>People Table</caption>
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Hooks ID</th>
                    <th>Soft Plastic ID</th>
                    <th>Rods ID</th>
                    <th>Number of Hooks</th>
                    <th>Number of Soft Plastics</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>

        <button type="button" onclick="displayPerson()">Click Me</button>
        </form>

    </div>

index.html script

<script>
        function displayPerson() {
            // console.log('test');
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    var person = xhttp.responseText;
                    var element = document.getElementById("personTable");
                    var result = JSON.parse(person).map((item) => Object.values(item));
                    for(i = 0; i < result.length; i++){
                        element.innerHTML += '<td>' + result[i] + '</td>';
                    }
                }
            };
            xhttp.open("GET", "/AddPerson", true);
            xhttp.send();
        }
    </script>

the xhttp.responseText

[{"id":1,"first_name":"Tyler","last_name":"Marlow","hooks_id":1,"sp_id":1,"rods_id":1,"num_hooks":10,"num_sp":30},{"id":2,"first_name":"Jon","last_name":"Marlow","hooks_id":2,"sp_id":1,"rods_id":1,"num_hooks":50,"num_sp":200}]

Also note that when another person is added I would like another row to be added to the table with the values in proper columns

1. Fix the HTML so the table has a thead and tbody 2. post an example of the xhttp.responseText so we can help you loop. Assuming the AJAX works — mplungjan, Nov 02 '20 at 15:01
element.innerHTML adds cells to the table, not to rows in the tbody - add the id to the tbody instead of the table — mplungjan, Nov 02 '20 at 15:02
Also why map and then loop, when you can just loop: `JSON.parse(xhttp.responseText).forEach(item => element.innerHTML += \`${item.something}${item.somethingelse}\`);` — mplungjan, Nov 02 '20 at 15:05

wangdev87 · Answer 1 · 2020-11-02T15:28:53.410

0

function displayPerson() {
  // console.log('test');            
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var person = xhttp.responseText;
      var element = document.getElementById("personTable");
      var rows = ``;
      JSON.parse(person).forEach(item => {
        var row = `<tr>`;
        row += `<td>${item.first_name}</td>`;
        row += `<td>${item.last_name}</td>`;
        row += `<td>${item.hooks_id}</td>`;
        row += `<td>${item.sp_id}</td>`;
        row += `<td>${item.rods_id}</td>`;
        row += `<td>${item.num_hooks}</td>`;
        row += `<td>${item.num_sp}</td>`;
        row += `</tr>`;
        rows += row;
      });
      element.innerHTML = rows;
    }
  };
  xhttp.open("GET", "/AddPerson", true);
  xhttp.send();
}

<div id="PersonContainer" class="DBcontainer">
  <form action='/addPerson' method="GET">
    <table class="center">
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Hooks ID</th>
          <th>Soft Plastic ID</th>
          <th>Rods ID</th>
          <th>Number of Hooks</th>
          <th>Number of Soft Plastics</th>
        </tr>
        <thead>
          <tbody id="personTable">
          </tbody>
    </table>

    <button type="button" onclick="displayPerson()">Click Me</button>
  </form>
</div>

edited Nov 02 '20 at 15:28

answered Nov 02 '20 at 15:15

wangdev87

8,611
3
8
31

person.foreach is not a function is the error I get – LerLow Nov 02 '20 at 15:22
person is not an array? – wangdev87 Nov 02 '20 at 15:23
And item.value are all undefined – LerLow Nov 02 '20 at 15:24
i thought person (xhttp.responseText) was array according to your example. – wangdev87 Nov 02 '20 at 15:24
1

I had to json parse to make it an array – LerLow Nov 02 '20 at 15:24
then try with `JSON.parse(person).forEach...` – wangdev87 Nov 02 '20 at 15:24
Do you know why item.value would be undefined? – LerLow Nov 02 '20 at 15:25
i can't find `value` key in your json response. – wangdev87 Nov 02 '20 at 15:26
item is the each json object of the array, so you can access item.first_name, item.last_name ,... – wangdev87 Nov 02 '20 at 15:27
item.first_name comes back as undefined – LerLow Nov 02 '20 at 15:28
As well as the resut of them, i used item.value as an example to refer to all of them – LerLow Nov 02 '20 at 15:28
only use `JSON.parse(person).forEach`, not `.map` – wangdev87 Nov 02 '20 at 15:31
so .map makes it undefined when trying to access it by item.? – LerLow Nov 02 '20 at 15:31
map and forEach are almost same regarding the loop array, but have a difference. refer to https://stackoverflow.com/questions/34426458/javascript-difference-between-foreach-and-map – wangdev87 Nov 02 '20 at 15:33
anyway, i think just replace `forEach` with `map` will work as well, since there is no return value for the map in my answer. – wangdev87 Nov 02 '20 at 15:35
however, best practice is to use forEach in your case. – wangdev87 Nov 02 '20 at 15:35

score 0 · Answer 2 · answered Nov 02 '20 at 15:15

Putting a new row onto a table in JavaScript can be done with the insertRow function and adding a cell to a row can be done with the insertCell function.

So in your code (depending on exactly what your parsed JSON looks like) in your for loop you are going to do something like:

row = element.insertRow(i); // add a new row to your table row.insertCell(0).innerHTML = row.insertCell(1).innerHTML = and so on .... But of course you'd put the insertCell line into a for loop as well.

How to put elements of an array into html table rows and columns

2 Answers2