Populating HTML table from multiple arrays

Question

I've two JavaScript arrays that I wish to populate HTML tables with but I can't seem to get the order of HTML tags correct to layout the table how I'm looking.

HTML:

<div id="dateRangeTable"></div>

JavaScript:

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
var sensorEventCount = [41,47,36,0,0,0,0];

function popTable(array, arrayTwo) {
    var list = document.createElement('table');
    var item;
    item = document.createElement('tr');
    for (var i = 0; i < array.length; i++) {
        item = document.createElement('td');
        item.appendChild(document.createTextNode(array[i]));
        list.appendChild(item);
    }
    item.appendChild(document.createElement('tr'));
    for (var i = 0; i < array.length; i++) {    
        item.appendChild(document.createElement('td'));
        item.appendChild(document.createTextNode(arrayTwo[i]));
        list.appendChild(item);
    }
    return list;
}

I'm looking it displayed with each array in line above and below each other, i.e.

Monday   Tuesday   Wednesday   Thursday etc.
  41       47         36           0

At the moment is printing like:

Monday Tuesday Wednesday Thursday Friday Saturday Sunday
                                                  41
                                                  47
                                                  36
                                                  0
                                                  etc.

I didn't bother trying to run the code. But I'm thinking of creating a 2D array. var array = [["Monday", 41], ["Tuesday", 47]]... then just create a table using that array — Dev
– Dev, Commented May 31, 2017 at 9:54
aren't you missing the first tr for the table-header (weekdays) ? — Sepultura
– Sepultura, Commented May 31, 2017 at 9:58
As a side note, since the code is repeating for each array (=row), you could also loop through the arrays. That would have the advantage that adding an extra row, would simply mean adding one extra parameter. ES6 could make that even easier with a parameter array. For example: jsfiddle.net/3fbmamLo — Me.Name
– Me.Name, Commented May 31, 2017 at 10:21

George · Accepted Answer · 2017-05-31 10:13:24Z

1

The problem is you're appending the <tr> to the <table> as a child and then adding the <td> to be a child of the <table> instead of the <tr>.

So your code comes out with the HTML like

<table>
    <td>Monday</td>
    ...
    <tr></tr>
    <td>41</td>
    ...
</table>

Also, you've not puting your headers in a <tr>

Try changing your code to be this:

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
var sensorEventCount = [41, 47, 36, 0, 0, 0, 0];

function popTable(array, arrayTwo) {
    var list = document.createElement('table');
    var headers = list.appendChild(document.createElement('tr'));
    for (var i = 0; i < array.length; i++) {
        var item = document.createElement('th');
        item.appendChild(document.createTextNode(array[i]));
        headers.appendChild(item);
    }

    list.appendChild(headers);

    var row = list.appendChild(document.createElement('tr'));
    for (var j = 0; j < array.length; j++) {
        var item = document.createElement('td')
        item.appendChild(document.createTextNode(arrayTwo[j]));
        row.appendChild(item);
    }

    list.appendChild(row);
    return list;
}

Example Link

edited May 31, 2017 at 10:13

answered May 31, 2017 at 10:03

George

6,7592 gold badges31 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Colin747 Over a year ago

Thanks for your answer, is it possible to align the values within the cells?

George Over a year ago

@ColinShewell of course, I'm assuming you want them aligned to the right? you'd be better to do this with css, I've added a rule to the example link although you may want to just put a class on the <td> instead.

Frank Wisniewski · Accepted Answer · 2017-05-31 10:26:19Z

You can also use the new template literal:

A little sample:

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Array2Table</title>
  </head>
  <body>
    <div id="tableContent"></div>
    <script>
      var country = ["Country1", "Country2", "Country3"];
      var capital = ["City1", "City2" , "City3"];
      
      const tmpl = (country,capital) => `
          <table><thead>
          <tr><th>Country<th>Capital<tbody>
          ${country.map( (cell, index) => `
              <tr><td>${cell}<td>${capital[index]}</tr>
          `).join('')}
          </table>`;
      tableContent.innerHTML=tmpl(country, capital);
      </script> 
  </body>
  </html>

Collectives™ on Stack Overflow

Populating HTML table from multiple arrays

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related