Uncaught Type Error Within my Array Statement

Question

As the title says, I am getting the following error in my code

Uncaught TypeError: Cannot read properties of undefined (reading 'length')

This is the location of the error

//Initial Array for ovens
var ovens_init = new Array();
ovens_init[1] = [];
ovens_init[2] = [];
ovens_init[3] = [];
ovens_init[4] = [];
ovens_init[5] = [];


//Figures out the max length of the inital arrays
var oven_max_length = 0;
for (i = 1; i < 6; i++){
  if(ovens_init[i][0].length > oven_max_length){
    oven_max_length = ovens_init[i][0].length;
  }
}

The code runs fine when they array has data but when its empty I get the following code above. What can I add to my code to allow the program to run, even when it is empty?

There's no php code in your post. You need to [check if the array index exists](https://stackoverflow.com/questions/13107855/how-to-check-if-an-array-index-exists-or-not-in-javascript) — mykaf, Apr 14 '23 at 16:05

tatactic · Accepted Answer · 2023-04-15T12:44:07.533

You get an error because none of your element have a value, so no length property either!!!

So the value that is not defined will always return undefined as result.

In your case, the value at ovens_init[i][0].length; in your loop have no length property on the value.

I don't understand what you expect as result in your loop, so precise your goal there

ovens_init[0] have no value however ovens_init.length is = to 6 and not 5 in your case because the array contains ovens_init[0] even if you don't declare it.

Have a nice day.

Here is what you try to do (I added >= to your loop condition otherwise the condition return always false if you have only empty arrays and is not executed 0 is never > 0 !!!

//Initial Array for ovens
var ovens_init = new Array();
ovens_init[1] = [];
ovens_init[2] = [];
ovens_init[3] = [];
ovens_init[4] = [];
ovens_init[5] = [];


//Figures out the max length of the inital arrays
var oven_max_length = 0;
console.log ("loop :");
for (var i = 1; i < 6; i++){
  if(ovens_init[i].length >= oven_max_length){
    oven_max_length = ovens_init[i].length;
    console.log("ovens_init[" + i + "].length = " + ovens_init[i].length);
    console.log("oven_max_length = " + oven_max_length);
  }
}

At the other side if you change the lenght of your Arrays like this :

ovens_init[1] = [];
ovens_init[2] = [1];
ovens_init[3] = [1,2,3];
ovens_init[4] = [];
ovens_init[5] = [1,2];

The output will look at this :

ovens_init[3].length = 3
oven_max_length = 3

Here is an example just to undersstand some of your mistakes :

window.addEventListener("DOMContentLoaded",init);
        let container;
        let outputList;
        let ovens_init = new Array();
        function init(){
            container = document.getElementById("container");
            outputList = document.getElementById("output_list");
            populateArray(ovens_init,1,5);
            container.textContent = "ovens_init length = " + ovens_init.length;
            listArrayValues(ovens_init, outputList);
        }
        function populateArray(arr, startIndex,arrayItems){
            for(var i = startIndex; i<= arrayItems; i++){
                ovens_init[i] = ["string number " + i];
            }
            ovens_init[0] = ["","","",""];
            // array length = 4
            // ovens_init[0] = []; will you give an array length of 0
            ovens_init[1] = "simple string";
        }
        function listArrayValues(arr, htmlElement){
            var str = "arr[0] is an Array (['','','','']) so arr[0].length = " + arr[0].length + "<br>";
            for(var i = 1; i< arr.length; i++){
                //str += "array[" + i + "] = " + arr[i] + " data type = " + (typeof arr[i]) + "<br>";
                if(typeof arr[i] === "object"){
                    str += "value of array at arr[" + i + "][0] = '" + arr[i][0] + "' " + "string length at arr[" + i + "][0] = string of " + arr[i][0].length + " characters " + "<br>";
                }else{
                    str += "value of array at arr[" + i + "] = '" + arr[i] + "', string of = " + arr[i].length + " characters<br>";
                }
            }
            htmlElement.innerHTML = str;
        }

        .container{
            padding: 10px;
            border: 1px solid #000000;
            margin-bottom: 20px;
            background-color: antiquewhite;
        }
        .output_list{
            padding: 10px;
            border: 1px solid #000000;
            background-color:beige;
        }

    <div id="container" class="container">

    </div>
    
    <div id="output_list" class="output_list">

    </div>

Uncaught Type Error Within my Array Statement

1 Answers1