Why is my JS variable not being seen outside of jquery.each() function? [duplicate]

Question

Edit: I have since figured out the issue with the help of the other users that commented below. The issue is that using jQuery.load() has a lag time. And as pointed out below, the problem was the variable was seen, just not the data within it. My solution to the below problem was adjust the code slightly using jquery's deferred object functions.

$.ajax({
    url: 'koc-click-tracker-loader.php',
    data: {url: 'ar'},
    dataType: 'html',
    context: document.body })
.done( function( data ) {
    // Same functionality as below
    });

Original Post: I am trying to parse an HTML table with 7 columns

Rank | Username | Highest CPM | Last 24h | Total clicks | Links Left | Last Clicked

Then I'm trying to put each row's data into a JSON object. However, when I try to access the data outside of the .each() loop, I can not. My variable is defined in the global scope. When I try to, for debugging sake, alert(output1.Rank).

var output = [];
$(function(){
    var output = [];
    $("#_BLANK").load("koc-click-tracker-loader.php #ar_content table", { url: 'ar' }, function() {
        var data = $("#_BLANK table tbody"); i=0;
        data.find('tr').each( function() {
            var $td = $(this).find('td');

            if ( i > 0 ) { // Skip first iteration, has blank data.
            output[i] = {
                Rank: $td.eq(0).text(),
                User: $td.eq(1).text(),
                KocID: $td.eq(1).find('a').prop("href"),
                CPM: $td.eq(2).text(),
                Last24: $td.eq(3).text(),
                TotalClick: $td.eq(4).text(),
                LinksLeft: $td.eq(5).text(),
                LastClicked: $td.eq(6).text() };
                }
            i++;
            });
        // Will Error here as well.
        });
    alert(output[1].Rank); // Errors here.
    console.log("output", output); // Shows all the data properly.
    });

Cannot read property 'Rank' of undefined.

Again, for some reason, my variable isn't global. Or there is something I'm missing something with jQuery...

Answer 1

It's because your $.each() function is inside a $.load() function.

The load function is an async call. You are in a race condition.

I bet if you put a break point on the output[i] = { line, and also on the alert(output[0].Rank); line, you will hit the alert first.