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.

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.

• javascript
• html
• arrays

Share Improve this question Follow asked Nov 26, 2017 at 2:05 WheezeWheeze 6511 silver badge77 bronze badges 1

• There are plenty of JavaScript libraries for that .. datatables/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./questions/47482073/… – Slai Commented Nov 26, 2017 at 2:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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>