Create html table from two array where arrays lengths not necessary the same

I mentioned this on the answer above, and just wanted to post an example of how you can get around the need to compare the length of the arrays. :)

What you can do is merge the two arrays into another array (create a 2d array), and then use the length of this merged array to get the total columns.

Then using a nested for loop, we can loop over each of the arrays in the 2d array, and add it as a row value to the column.

I have posted a simple example of this below :)

let a1 = ['a','b','c'];
let a2 = ['d','e'];

// Create a 2d array
// will look like [['a','b',''c], ['d','e']];
let mergedArray = [a1 , a2];

for(let i = 0; i < mergedArray.length; i++) {
  // You would create the Column Here
  console.log(`Col${i}`);
  for(let j = 0; j < mergedArray[i].length; j++) {
    // And here is the row value.
    console.log(mergedArray[i][j]);
  }
}

HTML CODE :

    <table id="myTbody">
    </table>

Javascript code

a1 = ['a', 'b', 'c'];
a2 = ['d', 'e'];

var maxLen = 0;
if (a1.length > a2.length) {
    maxLen = a1.length;
} else {
    maxLen = a2.length;
}

var tableHtml = '<tr><th>col1</th><th>col2</th></tr>'

for (var i = 0; i < maxLen; i++) {
    tableHtml = tableHtml + '<tr>';
    tableHtml = tableHtml + '<td>' + (i >= a1.length ? '' : a1[i]) + '</td>';
    tableHtml = tableHtml + '<td>' + (i >= a2.length ? '' : a2[i]) + '</td>';
    tableHtml = tableHtml + '</tr>';
}

$('#tabby').html(tableHtml);

The tricky thing here is that 1 array can be longer than the other, so first of all:

1. find the largest array's size
2. create a loop that will add as many table rows as the longest array size
3. add the cell content to each row, handing the case that 1 array might not have any defined values at that particular array index (because different size arrays)

I've added // 1. // 2. and // 3. to help reference the explaination.

const a1 = ['a','b','c']
const a2 = ['d','e','f','g']

const maxArrayLength = Math.max(a1.length, a2.length) // 1.

const tbody = document.querySelector('tbody');

for (let i = 0; i < maxArrayLength; i++) { // 2.
  const tr = tbody.insertRow(); // 2.
  tr.insertCell().innerHTML = a1[i] ? a1[i] : '' // 3.
  tr.insertCell().innerHTML = a2[i] ? a2[i] : '' // 3.
}

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

 const a1 = ['100','50000','60000'];
    const a2 = ['1111','22222222'];
    const greaterLength = (a1.length >= a2.length) ? a1.length : a2.length;

    let store = "";
    for(var i=0 ; i < greaterLength ; i++){
        let a1Value = (a1[i] != undefined) ? a1[i] : "";
        let a2Value = (a2[i] != undefined) ? a2[i] : "";
        store += `<tr> <td>${a1Value}</td> <td>${a2Value}</td></tr>`;
    }
    alert(store);

complete the table body.