How do I build an HTML table using Javascript array

Question

If I have the following array in Javascript,

var data = ["Last name", "First name", "Phone Number", "Location"]
["Doe", "John", "555-5555", "SYDNEY"]
["Garr", "Nancy", "555-5555", "SYDNEY"]
["Castro", "Judith", "555-5555", "SYDNEY"]
["Lynch", "Amanda", "555-5555", "SYDNEY"]

how do I loop through it to build an HTML table that simply lists names and phone numbers (like the following)?

Name	Phone Number	Name	Phone Number
Doe, John	555-5555	Garr, Nancy	555-5555
Castro, Judith	555-5555	Lynch, Amanda	555-5555

This is the Javascript I've tried, which works fairly well, but it doesn't populate all the columns.

var table = document.getElementById("myTable");
var i;
var j;
var row;
var cell;
for (i = 1; i < data.length; i++) {
  row = table.insertRow();
  var j;
    for (j = 0; j < 2; j++) {
      cell = row.insertCell(j);
      if (j === 0) {
        cell.innerHTML = data[i][j] + ", " + data[i][j+1]; // format name as last, first
      } else if (j === 1) {
        cell.innerHTML = data[i][j+1];
      }
   }
} 

Name	Phone Number	Name	Phone Number
Doe, John	555-5555
Garr, Nancy	555-5555
Castro, Judith	555-5555
Lynch, Amanda	555-5555

Any help is appreciated!

Answer 1

Only create a row every 2 times. Using mod to get the remainder lets you know if it is time to make a new row.

 var data = [ ["Last name", "First name", "Phone Number", "Location"], ["Doe", "John", "555-5555", "SYDNEY"], ["Garr", "Nancy", "555-5555", "SYDNEY"], ["Castro", "Judith", "555-5555", "SYDNEY"], ["Lynch", "Amanda", "555-5555", "SYDNEY"], ]; var table = document.getElementById("myTable"); var i; var j; var row; var cell; for (i = 1; i < data.length; i++) { if ((i - 1) % 2 === 0) row = table.insertRow(); var j; for (j = 0; j < 2; j++) { cell = row.insertCell(j); if (j === 0) { cell.innerHTML = data[i][j] + ", " + data[i][j+1]; // format name as last, first } else if (j === 1) { cell.innerHTML = data[i][j+1]; } } }

 <table id="myTable"></table>

Answer 2

There are two issues within your js. First of all, you should skip the iterations in the first loop by increments of two. Second, you must consider the second register in the internal loop.

 function createTable() { var data = [["Last name", "First name", "Phone Number", "Location"], ["Doe", "John", "555-5555", "SYDNEY"], ["Garr", "Nancy", "555-5555", "SYDNEY"], ["Castro", "Judith", "555-5555", "SYDNEY"], ["Lynch", "Amanda", "555-5555", "SYDNEY"]]; var table = document.getElementById("myTable"); for (i = 1; i < data.length; i+=2) { row = table.insertRow(); for (j = 0; j < 4; j++) { cell = row.insertCell(j); if (j === 0) { cell.innerHTML = data[i][j] + ", " + data[i][j+1]; } else if (j === 1) { cell.innerHTML = data[i][j+1]; } else if (j === 2) { cell.innerHTML = data[i+1][0] + ", " + data[i +1][1]; } else if (j === 3) { cell.innerHTML = data[i+1][2]; } } } }

 <button onclick="createTable()" type="button">click me</button> <table id="myTable"> <tr> <th>name</th> <th>phone no</th> <th>name</th> <th>phone no</th> <tr> </table>