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>