"Uncaught TypeError: Cannot read property 'length' of undefined" for an array iteration

Question

I've got a simple three-layer array which I'm iterating over one bit at a time. For some reason, after it's iterated over everything it comes up with the "Uncaught TypeError: Cannot read property 'length' of undefined" error.

The offending code is this:

for (k = 0; k < battleplans[i][j].length; k++) {

As it stands, it processes all the information as it's supposed to, then throws the error and stops.

But if I replace the part with the length property so the wider code is

for (k = 0; k < 1; k++) {
    document.getElementById("BP options").innerHTML += battleplans[i][j][k] + "<br>";
}

it switches to "Uncaught TypeError: Cannot read property '0' of undefined", yet again it does everything it's supposed to before it throws the error.

If I take an iteration off the outer for loops to ensure it's not trying to iterate over something that isn't there, it misses bits but still comes up with the error.

I've managed to find some similar issues that said to check if the target was defined, but the code isn't telling it to check anything it hasn't already checked and found to be there (I've verified that with by outputting the values of the length property to the console). It just seems to be triggering the error after it's done everything.

Beyond that I don't understand other people's code well enough to see any parallels with mine.

Any suggestions would be very much appreciated.

Edit: Further info, as requested.

Here's the battleplans constant:

const battleplans = [
    [ // [0]
        "FIRST BLOOD",
        [ // [0][1]
            "SET-UP",
            "The players roll off, and the winner decides which territory each side will use. The territories are shown on the map below.",
            "The players then alternate setting up units one at a time, starting with the player that won the rolloff to determine territories. Units must be set up wholly within their own territory, more than 12\" from enemy territory.",
            "Continue to set up units until both players have set up their armies. If one player finishes first, the opposing player sets up the rest of the units in their army, one after another."
        ],
        [ // [0][2]
            "FIRST BLOOD",
            "The player in command of the army that first slays an enemy model receives 1 extra command point."
        ],
        [ // [0][3]
            "GLORIOUS VICTORY",
            "The battle continues until one player has no units left on the battlefield, or at the end of the fifth battle round should this occur sooner.",
            "When the battle ends, each player calculates a victory score by adding up the Wounds characteristics of all the models from the opposing army that were slain during the battle. If one player beats their opponent's score by 50% or more, they win a <b>major victory</b>. Otherwise the player with the higher score wins a <b>minor victory</b>."
        ]
    ]
];

And here's the full nesting of for loops:

for (i = 0; i < battleplans.length; i++) {
    for (j = 0; i < battleplans[i].length; j++) {
        if (j == 0) {
            var name = battleplans[i][j];
            document.getElementById("BP options").innerHTML += "<input type=\"radio\" id=\"" + name + "\" name=\"battleplan\" value=\"" + name + "\"></input>";
            document.getElementById("BP options").innerHTML += "<label for=\"" + name + "\">" + name + "</label>";
        } else {
            document.getElementById("BP options").innerHTML += "<p>";
            for (k = 0; k < battleplans[i][j].length; k++) {
                document.getElementById("BP options").innerHTML += battleplans[i][j][k] + "<br>";
            }
            document.getElementById("BP options").innerHTML += "</p>";
        }
    }
    document.getElementById("BP options").innerHTML += "<hr>";
}

Answer 1

you have error in your for loops in your second loop change i < battleplans[i].length; to j < battleplans[i].length;

for (let i = 0; i < battleplans.length; i++) {
    for (let j = 0; j < battleplans[i].length; j++) {
        if (j == 0) {
            var name = battleplans[i][j];
            document.getElementById("BP options").innerHTML += "<input type=\"radio\" id=\"" + name + "\" name=\"battleplan\" value=\"" + name + "\"></input>";
            document.getElementById("BP options").innerHTML += "<label for=\"" + name + "\">" + name + "</label>";
        } else {
            document.getElementById("BP options").innerHTML += "<p>";
            for (k = 0; k < battleplans[i][j].length; k++) {
                document.getElementById("BP options").innerHTML += battleplans[i][j][k] + "<br>";
            }
            document.getElementById("BP options").innerHTML += "</p>";
        }
    }
    document.getElementById("BP options").innerHTML += "<hr>";
}