Function to create table from javascript object errors

Question

I have done some searching and used my cat as a rubber duck but I am really stuck with creating a function that takes an object and table id as arguments to spit out a simple table.

I am using basic javascript, as I am teaching myself it by diving in. You can view the whole code at http://oxygen.meddleso.me/ but I will post what I believe to be the most relevant here:

//html

<div id="inventoryTableDiv">
    <table>
      <tbody id='invtbody'></tbody>
    </table>
</div>

//main.js

var inventory = [{ice: 10}, {metal: 10}];

function refreshValues() {
  /* lots of other lines snipped */
  generateTable(inventory, invtbody);
}

function generateTable(array, tablebodyid) {
  var tablebody = document.getElementById(tablebodyid);
  var tr = "<tr>";
  for (var i = 0; i < array.length; i++) {
    obj = array[i]
    for (var x in obj) {
      console.log(x + " : " + obj[x]);
      tr += "<td>" + x + "</td>" + "<td>" + obj[x] + "</td>" + "</tr>";
      console.log(tr);
      tablebody.innerHTML = tr;
    }
  }
}

generateTable is based on this answer: Create HTML table from JavaScript object

It spits out the first log, "ice : 10" and the first set of tr:

"<tr><td>ice</td><td>10</td></tr>"

but I get the error:

Cannot set property 'innerHTML' of null

If I just console.log'd "tr" how can it be null? Any help would be appreciated and I hope this wasn't a terrible SO question.

It's `tablebody` that is null, not the `tr` variable. What are you assigning to `invtbody`? — CertainPerformance, May 08 '18 at 05:03
The statement `tablebody.innerHTML = tr;` first *removes* all content from `tablebody` and then sets it to that `tr` string. I don't think that's really what you want. *edit* Note that in the question you linked the code is `tablebody.innerHTML += tr;`. — Pointy, May 08 '18 at 05:04
As @CertainPerformance pointed out, I think that the line `generateTable(inventory, invtbody)` should be `generateTable(inventory, 'invtbody')` — Chirag Ravindra, May 08 '18 at 05:06
Thank you all, it really was that simple. `generateTable(inventory, 'invtbody')` solved my problem. My apologies for such a simple mistake! — DrauL, May 08 '18 at 05:09

score 1 · Accepted Answer · edited May 08 '18 at 08:38

generateTable(inventory, invtbody);

in the above line, invtbody is not initialized. You need to use "invtbody" instead.

You should change the line to:

generateTable(inventory, "invtbody");

Check the complete example out:

var inventory = [{ice: 10}, {metal: 10}];

function refreshValues() {
  /* lots of other lines snipped */
  generateTable(inventory, 'invtbody');
}

function generateTable(array, tablebodyid) {
  var tablebody = document.getElementById(tablebodyid);
  var tr = "<tr>";
  for (var i = 0; i < array.length; i++) {
    obj = array[i]
    for (var x in obj) {
      console.log(x + " : " + obj[x]);
      tr += "<td>" + x + "</td>" + "<td>" + obj[x] + "</td>" + "</tr>";
      console.log(tr);
      tablebody.innerHTML = tr;
    }
  }
}

refreshValues();

<div id="inventoryTableDiv">
    <table>
      <tbody id='invtbody'></tbody>
    </table>
</div>

score 0 · Answer 2 · answered May 08 '18 at 08:27

0

You are using invtbody as a variable, but it should be a string. So, just enclose it in quotes.

generateTable(inventory, 'invtbody');

answered May 08 '18 at 08:27

Ted

3,985
1
20
33

Function to create table from javascript object errors

2 Answers2