JavaScript - "undefined variable" in one part of the loop, working in another part

Question

Using the following code, I get this error RewardPurchases.PurchasesArray[i].Student_Name is undefined :

 $('button#random').click( function() { var Num = Math.floor(Math.random() * Total+1); Num--; for (var i in RewardPurchases.PurchasesArray) { /* --------> */ $('#display').text("Ticker number " + Num + " in the LEAP database belongs to...\n\n\n" + RewardPurchases.PurchasesArray[i].Student_Name.toUpperCase() + " (" + TutorGroup + ")").show().delay(300); if (i == Num) { var TutorGroup = ''; Frog.API.get('timetable.getClasses', { 'params': {'student': RewardPurchases.PurchasesArray[i].Student_ID }, 'onSuccess': function(data) { for (var i = 0; i < data.length; i++) { if (data[i].subject.name == "Tut Period") { TutorGroup = data[i].name.replace("/Tp", ""); } } } }); $('#display').animate({'font-size': 36}, 1500, function() { $(this).prepend('<p>!!! WINNER !!!</p>'); }); alert("Ticker number " + Num + " in the LEAP database belongs to...\n\n\n" + RewardPurchases.PurchasesArray[i].Student_Name.toUpperCase() + " (" + TutorGroup + ")"); } } } ); 

However, if I move this line $('#display').text(... as follows, the error disappears:

 $('button#random').click( function() { var Num = Math.floor(Math.random() * Total+1); Num--; for (var i in RewardPurchases.PurchasesArray) { if (i == Num) { var TutorGroup = ''; /* --------> */ $('#display').text("Ticker number " + Num + " in the LEAP database belongs to...\n\n\n" + RewardPurchases.PurchasesArray[i].Student_Name.toUpperCase() + " (" + TutorGroup + ")").show().delay(300); Frog.API.get('timetable.getClasses', { 'params': {'student': RewardPurchases.PurchasesArray[i].Student_ID }, 'onSuccess': function(data) { for (var i = 0; i < data.length; i++) { if (data[i].subject.name == "Tut Period") { TutorGroup = data[i].name.replace("/Tp", ""); } } } }); $('#display').animate({'font-size': 36}, 1500, function() { $(this).prepend('<p>!!! WINNER !!!</p>'); }); alert("Ticker number " + Num + " in the LEAP database belongs to...\n\n\n" + RewardPurchases.PurchasesArray[i].Student_Name.toUpperCase() + " (" + TutorGroup + ")"); } } } ); 

I do not understand why this is so? i not determined by the if ?

I am trying to display each name in an array before choosing a random name and displaying it in large font using "WINNER!". over it.

Thanks in advance,

Answer 1

What is the integrity of your array?

 //RewardPurchases.PurchasesArray [0] undefined [1] { Student_Name: undefined } [2] { Student_Name: 'Bob' } 

Above all are valid in an array. [0] and [1] will give you the error you received.

If PurchaseArray is not an array, but an object, then you need to check inside the loop.

 for (var i in RewardPurchases.PurchasesArray) { if(!RewardPurchases.PurchasesArray.hasOwnProperty(i)) { continue; } //rest of code... } 

Answer 2

Using for .. in is not the best practice in such situations. This makes a deep excavator of ALL properties, including functions belonging to the prototype.

The reason that only $('#display').text(... is causing problems is because you are trying to use the property of the RewardPurchases.PurchasesArray [i] property. Elsewhere you use it on your own, which is not will fail, it will just silently return undefined in these cases. (aka, 'params': {'student': RewardPurchases.PurchasesArray[i].Student_ID } .)

Using a test where you complete all the code inside your for .. in loop, typeof RewardPurchases.PurchasesArray[i] === 'object' && typeof RewardPurchases.PurchasesArray[i] !== null should do the trick, ensuring that every the property that you use in your iterations is just an object, not a function or some “scalar” value.

Note. You can also use RewardPurchases.PurchasesArray[i].hasOwnProperty('propertyName') , but it is not universally supported in all browsers, so the above example is more secure and works for your purpose.