I am trying to loop through an array of objects and populate them to a table

Question

Question 1 - So I am trying to do just a simple loop through my json array and create a new row for each of the objects in the array. For some reason I can't figure out, it is only printing the last object of the array to the DOM. So I know I have everything connected right, I just don't know why only the one object is showing up.

I know there are other posts similiar to this all over the internet, I just am having trouble figuring out my exact problem.

Question 2 - I get the error

"cannot read property insertRow of undefined"

in the console if I try to put the initial var row = table.insertRow(-1); inside my function, but I don't get the error if it's outside my function. I thought if it was inside the GenerateTable() then my function would be still be able to access it?

 var table_data = [{ first_name: 'Zoe', last_name: 'Heriot', home: 'Space Station W3' }, { first_name: 'Jo', last_name: 'Grant', home: 'Earth' }, { first_name: 'Clara', last_name: 'Oswald', home: 'Earth' }, { first_name: 'Adric', last_name: null, home: 'Alzarius' }, { first_name: 'Susan', last_name: 'Foreman', home: 'Gallifrey' }]; var row = table.insertRow(-1); function GenerateTable() { var table = document.getElementById('table')[1]; for (var i = 0; i <= table_data.length; i++) { var firstName = table_data[i].first_name; var lastName = table_data[i].last_name; var home = table_data[i].home; row.innerHTML = ` <td>${firstName}</td> <td>${lastName}</td> <td>${home}</td> `; }; }; if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") { GenerateTable(); } else { document.addEventListener('DOMContentLoaded', GenerateTable); } 

 <table id="table"> <tr> <th>First Name</th> <th>Last Name</th> <th>Home</th> </tr> </table> 

Answer 1

Question 1:

row.innerHTML = `
  <td>${firstName}</td>
  <td>${lastName}</td>
  <td>${home}</td>
`;

Is saying "remove everything in row.innerHTML and replace with <td>$... . And since the row value never change, you'll always write to the same row.

Question 2:

Have you tried to put table.insertRow() after the table var definition and remove the [1] ? Like:

  var table = document.getElementById('table');
  var row = table.insertRow(-1);

You can read more about insertRow and how it can be used at Mozilla Developer pages .

Answer 2

A few things:

You can't access a variable before you define it. The first line of your script does this, which is why you get the error:

var row = table.insertRow(-1);

table isn't defined until inside the function, so you can't use it until you've told javascript what it is. Additionally you want to add a row for each trip through the loop, so you need to put the insertRow() call inside the loop where it will add a row each time.

Also, i the loop you want to stop when i < table_data.length not <= otherwise it will throw an error on the last trip through.

Here's a working snippet:

 var table_data =[{ first_name : 'Zoe', last_name : 'Heriot', home : 'Space Station W3'}, { first_name : 'Jo', last_name : 'Grant', home : 'Earth'}, { first_name : 'Clara', last_name : 'Oswald', home : 'Earth'}, { first_name : 'Adric', last_name : null, home : 'Alzarius'}, { first_name : 'Susan', last_name : 'Foreman', home : 'Gallifrey'} ]; function GenerateTable(){ var table = document.getElementById('table'); for (var i=0; i < table_data.length; i++) { var row = table.insertRow(-1); var firstName = table_data[i].first_name; var lastName = table_data[i].last_name; var home = table_data[i].home; row.innerHTML = ` <td>${firstName}</td> <td>${lastName}</td> <td>${home}</td> `; }; }; GenerateTable() 

 tr:nth-child(even) { background: #ccdced; } td, th { padding:.5em } 

 <table id="table"> <tr> <th>First Name</th> <th>Last Name</th> <th>Home</th> </tr> </table>