Javascript - How to iterate multiple arrays into table rows?

Question

var MyArray = [['Cats', ['Lion','Tiger','Leopard']], ['Dogs', ['Wolf','Pug']], ['Reptiles', ['Snake','Gecko','Lizard','Triceratops']]];

var MyTable = document.getElementById("results");
const headerRow = document.createElement("tr");
MyTable.appendChild(headerRow);
for(var i=0;i<MyArray.length;i++) {
    const newCell = document.createElement("th");
    newCell.textContent = MyArray[i][0];
    headerRow.appendChild(newCell);
    for (const datum of MyArray[i][1]) {
        const newRow = document.createElement("tr");
        MyTable.appendChild(newRow);
        const newCell = document.createElement("td");
        newCell.textContent = datum;
        newRow.appendChild(newCell);
    }
}

<table id='results' border=1></table>

I'm currently trying to turn an array of arrays in Javascript into an HTML table of results. I have it kinda working, but my JS skills with arrays aren't enough to get the exact results I'm after; any help would be greatly appreciated!

You can see in the snippet that my code is iterating through that array of arrays, extracting the [0] data from each array (the animal class) and building a table with a header row just fine, but the actual data ([1] of each array) is all getting dumped into the first column only, with each entry being a new row.

How do I get the code to put these into separate cells of the new table, bearing in mind the child arrays are all different lengths?

My code is producing a table with all the data in the first column only. What should happen is it produces a table like this:

Cats	Dogs	Reptiles
Lion	Wolf	Snake
Tiger	Pug	Gecko
Leopard		Lizard
		Triceratops

Any guidance gratefully accepted!

Answer 1

My advice on this would be to avoid using tuples like this. Here what you are processing is called a tuple array ['familyName', ['members']] and is a bad practice. Generally speaking, in JS, you should work with objects as much as possible.

JavaScript offers a lot of tools to help you work with objects and arrays. See the code below where I'm using a reduce function to format the array into an object and the Math.max function to find the largest family length before iterating the whole dataset.

const myResults = [['Cats', ['Lion','Tiger','Leopard']], ['Dogs', ['Wolf','Pug']], ['Reptiles', ['Snake','Gecko','Lizard','Triceratops']]];

// Format the data into an array of objects: [{name: 'string', members: ['string']}]
const families = myResults.reduce(
  (acc, next) => [...acc, {name: next[0], members: next[1]}]
, []);

// Get table reference
const myTable = document.getElementById("results");

// Create headers
families.forEach(family => {
  const header = document.createElement("th");
  header.textContent = family.name;
  myTable.appendChild(header);
});

// Largest family length
const maxLength = Math.max(...families.map(family => family.members.length));

// Create cells
for (let i = 0; i < maxLength; i++) {
  const row = document.createElement("tr");
  myTable.appendChild(row);
  // Extract a row of animals for line 'i'
  const animals = families.map(family => family.members[i]);
  animals.forEach(animal => {
    const cell = document.createElement("td");
    cell.textContent = animal;
    row.appendChild(cell);
  });
}

<table id="results" border="1"></table>

Answer 2

Is this what you are looking for?

const values = [
  ['Cats',["Lion","Tiger","Leopard"]],
  ['Dogs',["Wolf","Pug"]],
  ['Reptiles',["Snake","Gecko","Lizard","Triceratops"]]
];

const table = document.querySelector("#myList");
const headers = table.querySelector("THEAD");
const body = table.querySelector("TBODY");

const maxCols = values.length;
let maxRows = 0;
values.forEach((col) => {
    if (col[1].length > maxRows) {
        maxRows = col[1].length;
    } 
});

// First loop to create table headers
for(let colIndex = 0; colIndex < maxCols; colIndex++) {
    const headerText = values[colIndex][0]; // Get the title
    const th = document.createElement("TH");
    th.textContent = headerText;
    headers.appendChild(th);
}

// Second loop to create all rows and look for a value on each column of that row
for (let rowIndex = 0; rowIndex < maxRows;  rowIndex++) {
    const col = document.createElement("TR");
    for(let colIndex = 0; colIndex < maxCols; colIndex++) {
        const list = values[colIndex][1]; // Get the elements list
        const blocText = list[rowIndex] || ""; // Get the value at row or empty string
        const td = document.createElement("TD");
        td.textContent = blocText;
        col.appendChild(td);
    }
    body.appendChild(col);
}

<table id="myList">
  <thead></thead>
  <tbody></tbody>
</table>