Table from Array

Question

I want to make a table from an array. I want to have 3 rows and 3 columns. The rows heading name should be 1,2,3. And the columns should be the name of the arrays: "country", "Capital", "population".

Here is my html:

<!DOCTYPE html>
<html>
<head>
</head>
<body>    
    <script>        
    var country = ["Norway", "Sweden", "Denmark"];
    var capital = ["Oslo", "Stockholm", "Copenhagen"];
    var population = ["5,2", "9.8", "5,7"];    

</body>
</html>

Possible duplicate of [Print out Javascript array in table](https://stackoverflow.com/questions/11958641/print-out-javascript-array-in-table) — Obsidian Age, May 29 '17 at 02:05
You asked for this [here](https://stackoverflow.com/questions/43773927/javascript-array-to-html-table) ??? — Frank Wisniewski, May 29 '17 at 05:35
Possible duplicate of [Javascript array to html table](https://stackoverflow.com/questions/43773927/javascript-array-to-html-table) — Douwe de Haan, May 29 '17 at 07:18
This is not a question this is a Request - SO is not and never will be a free coding service. — Roko C. Buljan, May 29 '17 at 07:21
@Olaf lol - Looking at your question history you seem to have asked this question before... Also, you do not seem to ever accept an answer. If you accept answers (or at least vote up those that helped you) people will be more likely to help you in the future. — blackandorangecat, May 29 '17 at 12:48

blackandorangecat · Answer 1 · 2017-05-29T12:40:24.820

1

Here is an example of how to do it using jQuery. Per the comment of Roko C. Buljan I have changed the append to a concatenation.

//Array
var country = ["Norway", "Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm", "Copenhagen"];
var population = ["5,2", "9.8", "5,7"];

//Start the table
var table = '<table>';

//Add the Headers
table += '<thead><tr><th>Country</th><th>Capital</th><th>Population</th></tr></thead>';

//Start the body
table += '<tbody>';

//Add the inner rows
for (i = 0; i < country.length; i++) {
  table += '<tr><td>' + country[i] + '</td><td>' + capital[i] + '</td><td>' + population[i] + '</td></tr>';

}

//Close the body and the table
table += '</tbody></table>';

//Add the completed table to the HTML
$('#table').append(table);

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

edited May 29 '17 at 12:40

answered May 29 '17 at 02:18

blackandorangecat

1,246
5
18
37

I know the OP explicitly asked for three rows and three columns, but still, wouldn't it be better if the loop was based on the array length rather than hardcoding it as `< 3`? – nnnnnn May 29 '17 at 03:34
@nnnnnn Yup, changed it. – blackandorangecat May 29 '17 at 03:37
1

Don't - append inside for loops. Concatenate-only instead. – Roko C. Buljan May 29 '17 at 07:17
@RokoC.Buljan Changed it. I have actually run into a problem with appending inside for loops before, but it seemed to work fine in this situation. – blackandorangecat May 29 '17 at 12:41

Rick · Answer 2 · 2017-05-29T07:14:36.447

Nest the arrays into an object. From there attach to the table by repeating cells.

var country = ["Norway","Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm", "Copenhagen"];
var population = ["5,2", "9.8", "5,7"];

var table={};
country.forEach((countries,key)=>
table[key]={country:countries,capital:capital[key],population:population[key]})
function tableCreate( table,l=Object.keys(table).length){
  var count=1;
 var body = document.body,
    tbl  = document.createElement('table');
    tbl.style.width  = '100px';
    tbl.style.border = '1px solid black';
    for(var i in table){
        var tr = tbl.insertRow();

 tr.appendChild(document.createTextNode(count));
      for(var j in table[i]){
           td = tr.insertCell(); 
          td.appendChild(document.createTextNode(table[i][j]));
          td.style.border = '1px solid black';     
        }
      count++
    }
    body.appendChild(tbl);
}
tableCreate(table);

or

var country = ["Norway","Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm", "Copenhagen"];
var population = ["5,2", "9.8", "5,7"];

var table={};
country.forEach((countries,key)=>
table[key]={country:countries,capital:capital[key],population:population[key]})
function tableCreate( table,l=Object.keys(table).length){
 var body = document.body,
    tbl  = document.createElement('table');
    tbl.style.width  = '100px';
    tbl.style.border = '1px solid black';
    for(var i in table){
        var tr = tbl.insertRow();
        for(var j in table[i]){
            var td = tr.insertCell();
          td.appendChild(document.createTextNode(table[i][j]));
          td.style.border = '1px solid black';     
        }
    }
    body.appendChild(tbl);
}
tableCreate(table);

Table from Array

2 Answers2