Javascript array to html table

Question

I want to make a html table from an array. I want to use the loop function to do this. But I struggle to find out how I can loop an array to a html table. I want have the name of the countries in the first section and "country" on top of the countries. In the last section I want to have the Capitals and "Capital" on top.

Here is my html code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>


    <script>

    var country = ["Norway", "Sweden", "Denmark"];
    var capital = ["Oslo", "Stockholm" , "Copenhagen"]




    </script>
</body>
</html>

Possible duplicate of [how to display array values inside tag?](http://stackoverflow.com/questions/12178792/how-to-display-array-values-inside-table-tag) — nelek, May 04 '17 at 04:39

score 3 · Answer 1 · answered May 04 '17 at 04:43

You can do this by looping through the country list and creating an HTML string. Then you can put that inside the tbody using a class or id selector. Here is an example-

var country = ["Norway", "Sweden", "Denmark"];
    var capital = ["Oslo", "Stockholm" , "Copenhagen"]

    var bodyString = '';
    $.each(country, function(index, ctry) {
        bodyString += ('<tr><td>'+ctry+'</td><td>'+capital[index]+'</td></tr>');
    });
    $('.countriesTable tbody').html(bodyString);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <table class="countriesTable">
      <thead>
          <tr><th>Country</th><th>Capital</th>
      </thead>
      <tbody>
      
      </tbody>
  </table>
</body>
</html>

score 2 · Answer 2 · answered May 04 '17 at 05:06

I think you want something like this, which is pure javascript (Run the snippet)--

var country = ["Norway", "Sweden", "Denmark"];
        var capital = ["Oslo", "Stockholm" , "Copenhagen"]
        var table= document.createElement('table'),
            thead = document.createElement('thead'),
            tbody = document.createElement('tbody'),
            th,
            tr,
            td;
            th = document.createElement('th'),          
            th.innerHTML="County";
            table.appendChild(th);
            th = document.createElement('th'); 
            th.innerHTML= "Capital"
            table.appendChild(th);
            table.appendChild(thead);            
            table.appendChild(tbody);
            
            document.body.appendChild(table);
         for(var i=0;i<country.length;i++){
            tr = document.createElement('tr'),
            //for county
            td= document.createElement('td');
            td.innerHTML=country[i];
            tr.appendChild(td);

            //for capital
            td = document.createElement('td');
            td.innerHTML=capital[i];
            tr.appendChild(td);
            tbody.appendChild(tr);
         }

table{
   border-collapse: collapse;
}

th,td{
 border:1px solid #000; 
}

score 1 · Answer 3 · answered Aug 15 '17 at 12:49

I made an easy tool for this - https://github.com/dszakal/ArrayToTable

Example:

var tableGen = new ArrayToTable();
// optional
tableGen.tableclasses = 'bluetable table-with-oddeven'; // for css
tableGen.tableid = 'something-unique';

dataArray = [
{
    country: 'Norway',
    capital: 'Oslo'
}
,
{
    country: 'Sweden',
    capital: 'Stockholm'
}
,
{
    country: 'Denmark',
    capital: 'Copenhagen'
}
];

tableGen.putTableHtmlToId(dataArray, 'tableHere');

score 0 · Answer 4 · answered May 04 '17 at 04:54

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
    var country = ["Norway", "Sweden", "Denmark"];
    var capital = ["Oslo", "Stockholm" , "Copenhagen"];

    var bodyString = '';
    $.each(country, function(index, country) {
        bodyString += ('<tr><td>'+country+'</td><td>'+capital[index]+'</td></tr>');
    });
    $('.country tbody').html(bodyString);
    
    });
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <table class="table table-striped country">
      <thead>
          <tr><th>Country</th><th>Capital</th>
      </thead>
      <tbody></tbody>
  </table>
</body>
</html>

Frank Wisniewski · Answer 5 · 2017-05-04T12:13:12.090

it´s a nice way to use template literals

<!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 = ["Norway", "Sweden", "Denmark"];
    var capital = ["Oslo", "Stockholm" , "Copenhagen"]
    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>

for Internet Explorer:

var country = ["Norway", "Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm", "Copenhagen"];
var tmpl = function tmpl(country, capital) {
return "<table><thead><tr><th>Country<th>Capital<tbody>" + 
    country.map(function (cell, index) {
    return "<tr><td>" + cell + "<td>" + 
    capital[index] + "</tr>";
}).join('') + "</table>";
};
tableContent.innerHTML = tmpl(country, capital);

Javascript array to html table

5 Answers5

Linked