What steps should I take to fix the Uncaught TypeError that states I cannot read the 'length' property of my undefined Global variable?

Question

What steps should I take to fix the Uncaught TypeError that states I cannot read the 'length' property of my undefined Global variable?

After pasting the code below into my Chrome browser console, I expected to see a table dynamically generated and filled with content from an array. However, despite what I consider to be valid code, I keep receiving the following error message:

Uncaught TypeError: Cannot read property 'length' of undefined at :15:31

Here is the code I am using:

var array = [["A1", "B1", "C1"],
        ["A2", "B2", "C2"],
        ["A3", "B3", "C3"],
        ["A4", "B4", "C4"],
        ["A5", "B5", "C5"],
        ["A6", "B6", "C6"],
        ["A7", "B7", "C7"]],

table = document.getElementById("table");

for(var i = 0; i < array.length; i++);
{
   //=== Adds a new Row
   var newRow = table.insertRow(table.length);

   for(var j = 0; j < array[i].length; j++);
   {
       //=== Adds a new cell
       var cell = newRow.InsertCell(j);

       //=== Adds value to the cell
       cell.innerHTML = array[i][j];
   }
}

Upon clicking on the 15:31 in the error message, it appears that the issue lies within the array[i].length section of the second loop.

From my experiences with these kinds of error messages, it seems like the variable may not be globally defined. In this case, my code clearly shows that the array variable is defined globally. Can anyone shed light on why it's still not recognized as such and provide a solution?

javascript arrays html-table

Answer 1

Answer №1

Looks like a few errors have crept in.

You mistakenly added semicolons after the two for loops.

for(var i = 0; i < values.length; i++)

for(var j = 0; j < values[i].length; j++)
There is a typo where insertCell function should be used instead of InsertCell.

var cell = newRow.insertCell(j);

To fix it, remove the unnecessary semicolons and correct the function name as mentioned above.

Answer 2

Looks like a few errors have crept in.

You mistakenly added semicolons after the two for loops.

for(var i = 0; i < values.length; i++)

for(var j = 0; j < values[i].length; j++)
There is a typo where insertCell function should be used instead of InsertCell.

var cell = newRow.insertCell(j);

To fix it, remove the unnecessary semicolons and correct the function name as mentioned above.

Answer 3

Answer №2

Keep an eye out for your semicolons. Check it out:

var array = [1, 2, 3, 4];

for(var i = 0; i < array.length; i++)
{
  console.log(i);
}

Adding a semicolon at the end of the for statement creates a for loop without a body and with block scope:

var array = [1, 2, 3, 4];

for(var i = 0; i < array.length; i++); // It will only increment i until i >= array.length
{
  console.log(i); // This will output 4
  // Accessing array[i] will return undefined, leading to errors
  // Trying to get length of undefined will throw an error
}

Answer 4

Keep an eye out for your semicolons. Check it out:

var array = [1, 2, 3, 4];

for(var i = 0; i < array.length; i++)
{
  console.log(i);
}

Adding a semicolon at the end of the for statement creates a for loop without a body and with block scope:

var array = [1, 2, 3, 4];

for(var i = 0; i < array.length; i++); // It will only increment i until i >= array.length
{
  console.log(i); // This will output 4
  // Accessing array[i] will return undefined, leading to errors
  // Trying to get length of undefined will throw an error
}

What steps should I take to fix the Uncaught TypeError that states I cannot read the 'length' property of my undefined Global variable?

Answer №1

Answer №2

Similar questions

Attempting to employ the HTML5 file picker feature within the AppMaker platform

Set only 3 fields to be editable and the rest to be read-only

Issue encountered when attempting to develop a countdown timer using Typescript

Customizing ExtJS 4.1: Mastering field overrides

Skybox images failing to display

remove a row from a table within a Firestore database

The Angular Button fails to display when all input conditions are met

Function that yields promise result

Having trouble locating HTML elements by their id when typing into a box using cy.get in Cypress with JavaScript

JQuery Touchscreen Resizability

Redirecting files from the file system to the emulator is not functioning properly

Images cannot be uploaded using ajax

The right way to create elements with jQuery syntax

The React functional component fails to update when triggered by a parent component's setState method

Angular directive ng-template serves as a component type

Discovering in VB.Net whether a number exceeds three times in an array

Including a JavaScript file using script tags can cause issues with jQuery UI

Having trouble with the Ajax load function not functioning in your HTML code?

Obtain the content of the text in the row before by pressing the button within the

How to grab the information from a different webpage using jQuery