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
– CertainPerformance, Commented May 8, 2018 at 5: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
– Pointy, Commented May 8, 2018 at 5:04
As @CertainPerformance pointed out, I think that the line generateTable(inventory, invtbody) should be generateTable(inventory, 'invtbody') — Chirag Ravindra
– Chirag Ravindra, Commented May 8, 2018 at 5:06
Thank you all, it really was that simple. generateTable(inventory, 'invtbody') solved my problem. My apologies for such a simple mistake! — DrauL
– DrauL, Commented May 8, 2018 at 5:09

Jesse · Accepted Answer · 2018-05-08 08:38:58Z

1

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>

edited May 8, 2018 at 8:38

Jesse

3,6626 gold badges28 silver badges42 bronze badges

answered May 8, 2018 at 8:24

SOUser

447 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ted · Accepted Answer · 2018-05-08 08:27:43Z

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 8, 2018 at 8:27

Ted

4,0671 gold badge23 silver badges35 bronze badges

Collectives™ on Stack Overflow

Function to create table from javascript object errors

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related