Getting Uncaught TypeError from while loop over a multidimensional array JS

Question

I am creating a multidimensional array and adding a specific part of the array in to a variable. The math is coming out right and works every time, but I am getting an Uncaught type error every time I do it. Specifically it says this.

 Uncaught TypeError: Cannot read property '2' of undefined

Here is the while loop that it is happening in.

while (i <= theAgents[agentNumber].length) {
            var comm = theAgents[agentNumber][i][2];
            commTotals += comm;
            console.log(commTotals);
            $(this).parent().find("#productionTotals").text(commTotals);
            i++
        };

And here is the section of the code in it's entirety

 $("body").on("click", "#agentButton", function(event) {

        // v1-1 creating an array to put all of the deal info in to so that I can push it to the theAgents array
        var theNewDeal = [];
        var totalDeals = 0;
        var i=0;
        var commTotals = 0;

        var newDealAddress = prompt('Enter the property address'); 
        var newDealContractDate = prompt('Enter the contract date');
        var newDealProduction = prompt('Enter the purchase price');
        var newDealCommission = prompt('Enter the commission');
            newDealProduction = parseInt(newDealProduction);
            newDealCommission = parseFloat(newDealCommission);
        var CommissionRate = newDealCommission/100;
        var newDealGCI = newDealProduction * CommissionRate;

       $(this).parent().find("#address").val(newDealAddress);
       $(this).parent().find("#production").val(newDealProduction);
       $(this).parent().find("#contractDate").val(newDealContractDate);
       $(this).parent().find("#commission").val(newDealCommission);
       $(this).parent().find("table.agent").append("<tr><td>"+newDealAddress+"</td><td>"+newDealContractDate+"</td><td class='production'"+
         "contentEditable='true'>$"+newDealProduction+"</td><td class='commission'>"+newDealCommission+"%</td><td>$"+newDealGCI+"</td></tr>");

      //This is the push to theNewDeal array
      theNewDeal.push(newDealAddress, newDealContractDate, newDealProduction, newDealCommission, newDealGCI);
        console.log(theNewDeal);

        agentCommission.push(newDealProduction);


       //Writing out the data-agent value to figure out how to get it so I can link the correct button to the right table.

       var agentNumber = $(this).attr("data-agent");


       //pushing data in to the proper theAgents array location.
        theAgents[agentNumber].push(theNewDeal);
       console.log("He has this many deals", theAgents[agentNumber].length+" And his agent number is "+agentNumber);
       console.log(theAgents); 

        //This is where I make the text of the total production table equal to the while loop above.    
        $(this).parent().find("#productionTotals").text(agentCommission);

       //while loop to add up total commissions of each agent every time a new deal is put in. Added in 1-2 
        while (i <= theAgents[agentNumber].length) {
            var comm = theAgents[agentNumber][i][2];
            commTotals += comm;
            console.log(commTotals);
            $(this).parent().find("#productionTotals").text(commTotals);
            i++
        };

The code executes just fine and works every time, but for some reason in Chrome I am getting that error. That is causing the code to shut down and not work for anything after the while loop. I have a few others that I have to create for different parts of the array, so any guidance on why it is popping up would be great!

Here is a JSFiddle of the whole project so you can see the whole thing without me posting it here. Thanks!

epascarello · Accepted Answer · 2015-03-30 13:46:34Z

3

Off by one error, index starts at zero.

while (i <= theAgents[agentNumber].length) {
        ^^^^

needs to be

while (i < theAgents[agentNumber].length) {
        ^^^^

answered Mar 30, 2015 at 13:46

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

1 Comment

Tom Mohr Over a year ago

this worked like a charm. So just to be clear.. because the index of the array starts at 0 it will be one less than the length so it can't equal the length. I was looking at the wrong 2. That was really throwing me off, but it makes a lot of sense now. Thanks!

Vikash · Accepted Answer · 2015-03-30 13:50:04Z

1

while (i < theAgents[agentNumber].length) {
        var comm = theAgents[agentNumber][i][2];
        commTotals += comm;
        console.log(commTotals);
        $(this).parent().find("#productionTotals").text(commTotals);
        i++
    };

i should be less than length as it starts with 0.

answered Mar 30, 2015 at 13:50

Vikash

7241 gold badge5 silver badges11 bronze badges

Comments

Krzysztof Safjanowski · Accepted Answer · 2015-03-30 13:47:10Z

0

Check if there is theAgents[agentNumber], than check if there is theAgents[agentNumber][i] then get value of theAgents[agentNumber][i][2] or set comm to 0

while (i <= theAgents[agentNumber].length) {
   var comm = (theAgents[agentNumber] && theAgents[agentNumber][i] && theAgents[agentNumber][i][2]) || 0;
   commTotals += comm;
   console.log(commTotals);
   $(this).parent().find("#productionTotals").text(commTotals);
   i++
};

answered Mar 30, 2015 at 13:47

Krzysztof Safjanowski

7,4483 gold badges38 silver badges50 bronze badges

3 Comments

Tom Mohr Over a year ago

Could you explain the '(theAgents[agentNumber] && theAgents[agentNumber][i] && theAgents[agentNumber][i][2]) || 0);' section of the code. I am not exactly sure what that is doing or what it's purpose is. Thanks!

Krzysztof Safjanowski Over a year ago

E.g. you have nested object var a = {b: {c: 'd'}} - try to get access to key c - console.log(a.b.c) - but what happens if b will be not available? TypeError: Cannot read property 'd' of undefined – how to prevent it? You can chack is each value avaible - if(a) {if(a.b) {if(a.b.c) {console.log('hooray')}}}. Who want to write that code? Developers are lazy. According to my first comment operaotr && works in the same way as nesteds if. Operator || returs second argument if both of them are falsy values

Tom Mohr Over a year ago

great - thanks for that insight, I appreciate it. Will keep that in mind for the future!

javinor · Accepted Answer · 2015-03-30 13:52:42Z

0

while (i <= theAgents[agentNumber].length) // should be < and not <=

because:

var arr = [1,2,3]
arr.length === 3     // true
arr[3] === undefined // true

answered Mar 30, 2015 at 13:52

javinor

6844 silver badges8 bronze badges

Collectives™ on Stack Overflow

Getting Uncaught TypeError from while loop over a multidimensional array JS

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related