Populate an HTML table from javascript array

Question

I have a script array along the lines of:

var lakeData = [
{
   "Month": "1959-01",
   "LakeErieLevels": 12.296
 },
 {
   "Month": "1959-02",
   "LakeErieLevels": 13.131
 },
 {
   "Month": "1959-03",
   "LakeErieLevels": 13.966
 },
 {
   "Month": "1959-04",
   "LakeErieLevels": 15.028
 },
 {
   "Month": "1959-05",
   "LakeErieLevels": 15.844
 },
 {
   "Month": "1959-06",
   "LakeErieLevels": 15.769
 }
 ];

And I a little HTML code:

<table id="lake">
  <thead><tr><th>Date</th><th>Depth</th></tr></thead>
  <tbody></tbody>
</table>

And I'm trying to get the array to populate into the table when the page loads.

There are plenty of JavaScript libraries for that .. datatables.net/examples/data_sources/js_array.html. Your question doesn't show any (re)search effort or attempt(s) at solving it, and you already got an answer stackoverflow.com/questions/47482073/… — Slai
– Slai, Commented Nov 26, 2017 at 2:20

score 6 · Accepted Answer · 2017-11-27 03:47:14Z

var lakeData = [{
    "Month": "1959-01",
    "LakeErieLevels": 12.296
  },
  {
    "Month": "1959-02",
    "LakeErieLevels": 13.131
  },
  {
    "Month": "1959-03",
    "LakeErieLevels": 13.966
  },
  {
    "Month": "1959-04",
    "LakeErieLevels": 15.028
  },
  {
    "Month": "1959-05",
    "LakeErieLevels": 15.844
  },
  {
    "Month": "1959-06",
    "LakeErieLevels": 15.769
  }
];

function addDataToTbody(nl, data) { // nl -> NodeList, data -> array with objects
  data.forEach((d, i) => {
    var tr = nl.insertRow(i);
    Object.keys(d).forEach((k, j) => { // Keys from object represent th.innerHTML
      var cell = tr.insertCell(j);
      cell.innerHTML = d[k]; // Assign object values to cells   
    });
    nl.appendChild(tr);
  })
}

var lakeTbody = document.querySelector("#lake tbody");

addDataToTbody(lakeTbody, lakeData);

<table id="lake">
  <thead>
    <tr>
      <th>Date</th>
      <th>Depth</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Collectives™ on Stack Overflow

Populate an HTML table from javascript array

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related