Combining two arrays to create a table (javascript)?

Question

I have data in two arrays. My data looks like this:

var cats = [ "a", "b", "c", "d", "e", "f"];
var dogs = [ "z", "y", "x", "w"]

I want my tables to have the same number of rows as there are elements in cats and the same number of columns as there are elements in dogs. Here is what I have so far:

<html>
<table id = "mytable">
    <tr>
        <td> Cats/dogs</td>
    </tr>
</table>    
<body>

<script>
var cats = [ "a", "b", "c", "d", "e", "f"];
var dogs = [ "z", "y", "x", "w"]
var numberOfRows = cats.length;
var numberOfColumns = dogs.length;

for (var i = 0; i < numberOfRows; i++){
    var column = "<td>" + cats[i] + "</td>";
    for (var j = 0; j < numberOfColumns; j++){
        column += "<td id =" cats.concat(dogs) "></td>;
    }
    $("#mytable").append("<tr>" + column + "</tr>");
}
</script>
</body>
</html>

I'm having trouble displaying still

Possible duplicate of [How to merge two arrays in JavaScript and de-duplicate items](https://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items) — Max Baldwin, Oct 18 '18 at 21:33
What exactly is going wrong when you run this? Be very specific. And if you add this as a html+javascript snippet to you question, we can run it and give you better answers. — Alex Wayne, Oct 18 '18 at 21:36
@MaxBaldwin the linked question flat-merges 2 arrays, while the OP wants to make a 2d table (array) out of these two. — Al.G., Oct 18 '18 at 21:41
`for (var = 0; i < numberOfRows; i++){` looks like you mean `for (var i = 0; i < numberOfRows; i++){` — Ray Suelzer, Oct 18 '18 at 21:43
Is there more code than this? I agree, seeing a snippet would be welcome. There are a lot of ways to interpret "I'm having trouble displaying." — Dave Kanter, Oct 18 '18 at 21:43
Possible duplicate of [Javascript: build html table from 2 arrays](https://stackoverflow.com/questions/37363586/javascript-build-html-table-from-2-arrays) — Dexygen, Oct 18 '18 at 21:46
To everybody who's answered, this is a blatant duplicate. I'm not blaming the OP per se, but such questions should be closed, not answered. — Dexygen, Oct 18 '18 at 21:47
That and the OP is downvoting all the answers. Well, I think it is the OP, sorry if its not. — Ray Suelzer, Oct 18 '18 at 21:49
Also, a duplicate of https://stackoverflow.com/questions/14643617/create-table-using-javascript — wwerner, Oct 18 '18 at 21:54
``@downvoter: I don't think downvoting answers sends the right message to the ones trying to help out a fellow developer. If a duplicate is found, it will eventually get highlighted. But, punishing people for genuinely trying to help will do more harm than good.`` — Vikram Deshmukh, Oct 18 '18 at 21:58

Vikram Deshmukh · Answer 1 · 2018-10-18T21:53:00.980

Welcome to Stack Overflow. You're almost there. You need to add a new tr every time you enter the outer loop. Check out my snippet.

Disclaimer: Shabby code quality. Please judge me not!

var cats = [ "a", "b", "c", "d", "e", "f"];
var dogs = [ "z", "y", "x", "w"]
var str = '';
for(let cat of cats) {
  str = '<tr>';
  for(let dog of dogs) {
    str += '<td>'+cat+' '+dog+'</td>';
  }
  str += '</tr>';
  $("#mytable").append( str );
}

td {
border: 1px solid #ddd;
padding: 4px 6px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<tabld id = "mytable">
</table>

BąQ · Answer 2 · 2018-10-18T22:05:58.653

0

You have some syntax errors in your code.

Fixed HTML:

<table id="mytable">
  <tr>
    <td> Cats/dogs</td>
  </tr>
</table>

Fixed JS: var cats = ["a", "b", "c", "d", "e", "f"]; var dogs = ["z", "y", "x", "w"];

var numberOfRows = cats.length;
var numberOfColumns = dogs.length;

for (var i = 0; i < numberOfRows; i++) {
  var column = "<td>" + cats[i] + "</td>";
  for (var j = 0; j < numberOfColumns; j++) {
    column += "<td></td>";
  }
  $("#mytable").append("<tr>" + column + "</tr>");
}

Now works as you described: https://jsfiddle.net/6Lzdejta/

edited Oct 18 '18 at 22:05

answered Oct 18 '18 at 21:43

BąQ

194
2
12

1

It is not advisable to have more than one element with the same `id` value. – Vikram Deshmukh Oct 18 '18 at 21:53
1

Yes, you are right. I've just fixed syntax without id's. I'll edit my answer. – BąQ Oct 18 '18 at 22:04

dana · Answer 3 · 2018-10-18T21:48:04.723

You can use nested loops to build out your table. Here is an example:

var cats = [ "a", "b", "c", "d", "e", "f"];
var dogs = [ "z", "y", "x", "w"];

var html = "";
for (var i = 0; i < cats.length; i++) {
  html += "<tr>";
  for (var j = 0; j < dogs.length; j++) {
    html += "<td>";
    html += "cats[" + i + "] = " + cats[i] + ", dogs[" + j + "] = " + dogs[j];
    html += "</td>";
  }
  html += "</tr>";
}
document.getElementById("mytable").innerHTML = html;

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

score 0 · Answer 4 · answered Oct 18 '18 at 21:44

You misspelled table and you should have a body in your table.

let cats = ['persian', 'tabby', 'bengal'];
let dogs = ['shepard', 'terria'];


var numberOfRows = cats.length;
var numberOfColumns = dogs.length;

for (var i = 0; i < numberOfRows; i++){
    var row = $("<tr>");
    for (var j = 0; j < numberOfColumns; j++){
        row.append($(`<td>`).text(`${cats[i]} - ${dogs[j]}`));
    }
    $("#mytable tbody").append(row);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id = "mytable">
  <tbody>
    <tr>
        <td> Cats/dogs</td>
    </tr>
  </tbody>
</table>

score 0 · Answer 5 · answered Oct 18 '18 at 21:46

Or using Array.forEach:

var cats = [ "a", "b", "c", "d", "e", "f"];
var dogs = [ "z", "y", "x", "w"]

var numberOfRows = cats.length;
var numberOfColumns = dogs.length;

cats.forEach(function (cat) {
    $("#mytable").append(`<tr id="${cat}">`)
  dogs.forEach(function (dog) {
    $(`#${cat}`).append(`<td>${cat},${dog}</td>`)
  })
})

https://jsfiddle.net/zj1dcs6q/10/

Combining two arrays to create a table (javascript)?

5 Answers5