Why is my javascript code returning TypeError undefined?

Question

class CustomTable
{
 constructor(div_id, headings) {
 this.div = div_id;
 this.header_titles = headings;
 this.item_list = new Array();
 var _this = this;

 this.add_item = function(items)
 {
  _this.item_list.push(items);
  console.log(_this.item_list);
 }

 this.remove_item = function(item_index)
 {
  _this.item_list.splice(item_index, 1);
  console.log(_this.item_list);
 }

 this.drawTable = function()
 {
  var t = "<table class='table' style='width:100%'>";
  t += "<thead>";
  t += " <tr>";
  t += "  <th>#</th>";

  for (var i = 0; i < _this.header_titles.length; i++)
  { t += "<th>" + _this.header_titles[i] + "</th>"; }
  t += "  <th>Add</th>";
  t += " </tr>";
  t += "</thead>";
  t += "<tbody>";

  for (var i = 0; i < _this.item_list.length; i++)
  {
    t += "<tr>";
    t += "<td>" + i + "</td>";
    console.log(i);             

    var subitem_count = _this.item_list[i].length;
    //                  ^^^^^^^^^^^^^^^^^^
    //                  This errors out: TypeError undefined
    for (var j = 0; j < subitem_count; i++)
    {
      t += "<td>" + _this.item_list[i][j] + "</td>"
    }
    t += "</tr>"
  }
  t += "</tbody>";
  t += "</table>";

  document.getElementById(_this.div).innerHTML = t;
  }
 }
}

var ct = new CustomTable("server_list",["Server Name","IP Address", "RAM in GB"]);
ct.add_item(["QMM-TRGEXCH01","192.168.0.225","2GB"]);
ct.add_item(["QMM-SRCEXCH01","192.168.0.226","2GB"]);
ct.add_item(["QMM-TRGAGENT01","192.168.0.227","2GB"]);
ct.add_item(["QMM-SRCAGENT01","192.168.0.228","2GB"]);
ct.add_item(["QMM-MIGCONSOLE","192.168.0.229","2GB"]);

ct.drawTable();

Please view this JSFiddle

I have searched everywhere and can't figure out why Javascript keeps erroring out. The variable is in scope and I have checked it using

_this.item_list[i].constructor === Array

and it is an Array.

I get this error at first iteration.

console.log(i); // i = 0 at error

So its not that the code is iterating out of bounds. That might be an issue with the code as well but there is something else wrong. Please look at the fiddle, I have updated it and remove the = from all for loops but I still get the same error.

Answer 1

It is because you are trying to invoke a method on element at unavailable index.

for (var i = 0; i <= _this.item_list.length

is supposed to be

for (var i = 0; i < _this.item_list.length 

Array out of bounds issue - You are trying to access the element at index 6 which is undefined

As per your logic, if they are 5 elements in _this.item_list you are iterating elements at index 0, 1, 2, 3, 4, 5 but you should only be iterating upto 4 as the index starts at 0 and not 1

You will have to replace all instances of <= in your for-loop to <

Also your inner loop has a bug.

for (var j = 0; j < subitem_count; i++)

supposed to be

 for (var j = 0; j < subitem_count; j++)

You should be incrementing j and not i in the inner loop.

Check Fiddle