JavaScript - "variable undefined" in one part of loop, working in a different part
<p>Using the following code, I'm getting this error <code>RewardPurchases.PurchasesArray[i].Student_Name is undefined</code>:</p>

<pre><code>$('button#random').click( function() {
    var Num = Math.floor(Math.random() * Total+1);
    Num--;

    for (var i in RewardPurchases.PurchasesArray) {
/* --------&gt; */     
        $('#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 &lt; 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('&lt;p&gt;!!! WINNER !!!&lt;/p&gt;');
            });

            alert("Ticker number " + Num + " in the LEAP database belongs to...\n\n\n" + RewardPurchases.PurchasesArray[i].Student_Name.toUpperCase() + " (" + TutorGroup + ")");
        }
    }
} );
</code></pre>

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

<pre><code>$('button#random').click( function() {
    var Num = Math.floor(Math.random() * Total+1);
    Num--;

    for (var i in RewardPurchases.PurchasesArray) {

        if (i == Num) {
            var TutorGroup = '';
/* --------&gt; */         
            $('#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 &lt; 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('&lt;p&gt;!!! WINNER !!!&lt;/p&gt;');
            });

            alert("Ticker number " + Num + " in the LEAP database belongs to...\n\n\n" + RewardPurchases.PurchasesArray[i].Student_Name.toUpperCase() + " (" + TutorGroup + ")");
        }
    }
} );
</code></pre>

<p>I don't understand why this is the case? <code>i</code> isn't being defined by the <code>if</code> statement?</p>

<p>I'm trying to display each name in an array, before picking a random name and displaying it in a large font with "WINNER!" above it.</p>

<p>Thanks in advance,</p>
