$(document).ready(function() {
    var activeGames = [];

    $.getJSON('php/postActiveGames.php', {'index':99}, function(data) {
        $.each(data, function(index, user) {
            activeGames.push(user.username);
            console.log(activeGames[index]);
        });
    });

    console.log(activeGames[0]);
});

I'm trying to store data from a MYSQL database in a Javascript array. When I run console-log commands inside the callback function, the output is as I expect:

    Joel
    Scott
    Troy

But then when I try to log the array elements outside of the function, the console reads undefined. And interestingly, the last line of code seems to be executing first. Can anyone point out what I'm doing wrong?