Input Javascript array into given HTML table

Question

I am trying to append data from a Javascript array to a HTML table. I have tried appending the data with javascript/jquery, but I am not sure how to iterate through so that each number goes into each grid cell. I am trying to get the result to look like this (but without the header):

1	2	3
4	5	6

 var array = [ [1, 2, 3], [4, 5, 6] ];

 <table id = "table"> <tr> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> </tr> <tr> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> </tr>

Thank you for the help. I am new to learning Javascript and appreciate all the help.

Answer 1

Perhaps you can do something like this:

const elements = document.getElementsByClassName("grid");
let idx = 0;
for (var i = 0; i < array.length; i++){
     for (var j = i; j < array[i].length; j++){
       elements[idx].innerHTML = array[i][j];
       idx++;
    }
}

Answer 2

There are probably better ways to do this but this works if the table is empty.

  var tbl = document.getElementById('table')

  var array = [
    [1, 2, 3],
    [4, 5, 6]
  ];

  array.forEach(function (rowData) {   
    var row =  tbl.insertRow();
    rowData.forEach(function (cellData) {
      var cell = row.insertCell();
      cell.setAttribute('class', 'grid');
      cell.appendChild(document.createTextNode(cellData));
      row.append(cell);
    });
  });

Answer 3

There are really numerous ways of doing this, here is two examples:

1. You have 2 dimensional array, so you loop both dimensions:

   array.forEach(arr => { // this will loop both dimensions and we will target tr element

   arr.forEach(num => { // this will loop all 3 numbers and we will target td elements

And you use

document.querySelector("table tr:nth-of-type(" + tr + ") td:nth-of-type(" + (td++) + ") input")

to target all inputs directly inside loop.

 var array = [ [1, 2, 3], [4, 5, 6] ]; let tr = 1; let td = 1; array.forEach(arr => { arr.forEach(num => { document.querySelector("table tr:nth-of-type(" + tr + ") td:nth-of-type(" + (td++) + ") input").value = num; }); tr++; td = 1; })

 <table id="table"> <tr> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> </tr> <tr> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> </tr>

Or:

2. You use flat() to make one dimension array and for each value just loop inputs +1

Now you have one-liner:

array.flat().forEach( arr => document.querySelectorAll('.grid[type="number"]')[num++].value=arr)

 var array = [ [1, 2, 3], [4, 5, 6] ]; let num = 0 array.flat().forEach( arr => document.querySelectorAll('.grid[type="number"]')[num++].value=arr)

 <table id="table"> <tr> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> </tr> <tr> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> </tr>

Answer 4

I do in in this way

    let array = [
        [1, 2, 3],
        [4, 5, 6]
    ];
    
    const table = document.querySelector('#table');
    const tableRows = table.rows
    //Convert HTMLCollection to Array and run forEach
    Array.from(tableRows).forEach((row,rowIndex)=>{
        const tableCells = row.cells
        Array.from(tableCells).forEach((cell,cellIndex)=>{
            cell.childNodes[0].value = array[rowIndex][cellIndex]
        })
    })

Answer 5

I prefer to use.forEach instead of.length, to prevent errors if the list does not have a length.

 var array = [ [1, 2, 3], [4, 5, 6] ]; const $table = document.querySelector('#table'); array.forEach((a, i) => { a.forEach((o, n) => { $table.rows[i].cells[n].childNodes[0].value = o; }); });

 <table id="table"> <tr> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> </tr> <tr> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> </tr> </table>