HTML add data column by column instead of row by row

Question

I have 2 arrays in a external js file

var fruit = ["Banana", "Orange", "Apple", "Mango"];
var colour = ["yellow", "orange", "red", "orange"];

I need to store this data in a table.

let p = document.getElementById('output1');
let fruit = ["Banana", "Orange", "Apple", "Mango"];
p.innerHTML = fruit.map(i => `<td>${i}</td>`).join('');

p = document.getElementById('output2');
let colour = ["yellow", "orange", "red", "orange"];
p.innerHTML = colour.map(i => `<td>${i}</td>`).join('');

<table>
  <tr>
    <th>fruit</th>
    <th>colour</th>
  </tr>

  <tr id="output1"></tr>
  <tr id="output2"></tr>

</table>

This does not work as it is entered row by row. How can I make it enter column by column? Thanks in advance!

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_headers — Olian04, Jun 28 '18 at 15:07
Are these arrays always the same length? Is there something wrong with using a `{ key: value }` object instead? — , Jun 28 '18 at 15:15
You should probably use `const` instead of `let` here. The values never change and `let` or `var` often produce side-effects. — , Jun 28 '18 at 15:23

score 1 · Accepted Answer · answered Jun 28 '18 at 15:10

There are a bunch of ways to do this. Here's a for loop: (note that I put an id of "foo" on the table)

for(var i = 0; i < fruit.length; i++) {
    document.getElementById("foo").innerHTML += "<tr><td>" +
            fruit[i] + "</td><td>" + colour[i] + "</td></tr>";
}

Avoid mutating innerHTML a bunch by appending to a temporary variable instead:

var tableHTML = "";
for(var i = 0; i < fruit.length; i++) {
    tableHTML += "<tr><td>" + fruit[i] + "</td><td>" + colour[i] + "</td></tr>";
}
document.getElementById("foo").innerHTML += tableHTML;

Take advantage of the second argument passed to the map callback:

document.getElementById("foo").innerHTML += fruit.map((fruit, index) =>
        `<tr><td>${fruit}</td><td>${colour[index]}</td></tr>`).join("");

As a joke, you could transpose the table using CSS - stolen from this answer:

If you want to display columns, not rows, try this simple CSS
tr { display: block; float: left; }
th, td { display: block; }

Get Off My Lawn · Answer 2 · 2018-06-28T15:28:35.503

You can merge the two arrays into an array of strings using map, then using innerHTML insert those new strings into the <tbody> (which I added).

Note: This requires the arrays be the same length.

let fruit = ["Banana", "Orange", "Apple", "Mango"];
let colour = ["yellow", "orange", "red", "orange"];

let tblItems = fruit.map((item, index) => `<tr><td>${item}</td><td>${colour[index]}</td></tr>`)

document.querySelector('#fruit-colours > tbody').innerHTML = tblItems.join('')

<table id="fruit-colours">
  <thead>
    <tr>
      <th>Fruit</th>
      <th>Colour</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

HTML add data column by column instead of row by row

2 Answers2