InsideDarkWeb.com

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

I get two array as response from some server, the arrays can be with different lengths. and I want to build a table from this arrays.

For example the server response is

let a1=response.a1;
let a2=response.a2;

where

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

so I want the table be like:

+------+------+
| Col1 | Col2 |  
+------+------+
| a    | d    |
| b    | e    |
| c    |      |
+------+------+

and I need something like:

var rows=""
for(var i=0;i<a1.length;i++)
{
    for(var j=0;j<a2.length;j++)
    {
       rows+='<tr>....</tr>'
    }
}
$('#myTbody').html(rows);

Stack Overflow Asked by good_shabes on November 18, 2021

4 Answers

4 Answers

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]);
  }
}

Answered by Spangle on November 18, 2021

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);

Answered by Runtime Terror - BS on November 18, 2021

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>

Answered by camaulay on November 18, 2021

 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.

Answered by kd patel on November 18, 2021

Add your own answers!

Related Questions

list assignment index out of range in a list array

3  Asked on January 18, 2021 by marc833

 

std::transform over QMap

1  Asked on January 18, 2021 by vencat

     

Loop inside the function that accepts the parameter

1  Asked on January 18, 2021 by abi-wardani

     

RegEx Print a Custom Line

1  Asked on January 18, 2021 by user9938830

   

What is localhost 3000?

3  Asked on January 18, 2021 by dawit-mesfin

   

a (recursive) function that will calculate sum for a given n

2  Asked on January 17, 2021 by randomobject123

     

C – can’t prepend a linked list

2  Asked on January 17, 2021 by ilmoi

     

R: count distinct IDs where selected column is non-null

4  Asked on January 17, 2021 by austin-gilbert

     

How to store a list of objects in sqflite?

1  Asked on January 17, 2021 by 0x4b50

         

SQL to allocate rows from one table to another

3  Asked on January 17, 2021 by user3093820

   

Ask a Question

Get help from others!

© 2021 InsideDarkWeb.com. All rights reserved.