Получить вложенные элементы массива для добавления в новый столбец в таблице HTML

Question

Я пытаюсь добавить элементы из двумерного массива в таблицу, но все отображается в одном столбце слева.Как я могу отделить tableDataArr [1], чтобы начать загрузку в следующем столбце поперек?

Javascript

let names = []; //populated dynamically
let language = []; //populated dynamically 
let tableDataArr = [names, language];

function renderData() {
  for (let i = 0; i < tableDataArr.length; i++) {
    tableDataArr[i].forEach(j => {
      let newRow = document.createElement("tr");
      newRow.className = "row";
      newRow.innerHTML = `<td class='cell'>${j}</td>`;
      leftTable.appendChild(newRow);
    });
  }
}

HTML

<div class='left-tbl-wrap'>
  <table class='table' id='left-table'>
    <tr class='row'>
      <th class='th'>Name</th>
      <th class='th'>Language</th>
      <th class='th'>Latest tag</th>
      <th class='th'><span class='delete'></span></th>
    </tr>
  </table>
</div>

Answer 1

Для каждой итерации добавьте имя и язык в одну и ту же строку, затем вставьте эту строку в таблицу.

Я добавил некоторые элементы в массив имен и языков для демонстрации

let names = ["name1", "name2", "name3"]; //populated dynamically
let language = ["language1", "language2", "language3"]; //populated dynamically 
let tableDataArr = [names, language];
const leftTable = document.querySelector("#left-table");

function renderData() {
  tableDataArr[0].forEach((j, i) => {
    let newRow = document.createElement("tr");
    newRow.className = "row";
    newRow.innerHTML = `<td class='cell'>${j}</td><td class='cell'>${tableDataArr[1][i]}</td>`;
    leftTable.appendChild(newRow);
  });
}

renderData();

<div class='left-tbl-wrap'>
  <table class='table' id='left-table'>
    <tr class='row'>
      <th class='th'>Name</th>
      <th class='th'>Language</th>
      <th class='th'>Latest tag</th>
      <th class='th'><span class='delete'></span></th>
    </tr>
  </table>
</div>

Answer 2

Так и должно быть

function renderData() {
    for (let i = 0; i < tableDataArr.length; i++) {
      let newRow = document.createElement("tr");
      tableDataArr[i].forEach(j=> {
        newRow.className = "row";
        newRow.innerHTML = `<td class='cell'>${j}</td>`;
        leftTable.appendChild(newRow);
      });
    }
}

Поскольку вам может не потребоваться повторять строку таблицы во втором цикле. Если вам это нравится, то в каждую строку будут добавлены только одни данные таблицы.