JavaScript object has data in console but no data in code

Question

I have been working with the Github API and have made function that gets the data from a Github project and returns it in a JSON like collapsed expanded from

function drawProjects() {
    var GPD = getGPD('https://api.github.com/repos/frc5104/Power-Up- 2018/projects');
    console.log(GPD);
}

This is quite odd because a "normal" JSON object would look like collapsed expanded from

function drawProjects() {
    var GPD = {
        tp: "ay!",
        test1: {
            key: "Hi"
        }
    };
    console.log(GPD);
}

There JSON from the function doesn't have any Data when collapsed, though the "normal" JSON does.

This would be fine, accept I cannot access anything inside of the object. Stringifying the object returns "{}", you cant for loop through the object, you cant access the data, etc.

I was wondering if anyone has encountered this problem before and or if anyone knows a fix to this problem.

For reference get GPD looks like this:

function getGPD(url) {
    var Gde = {};
    getGAPI(url, function (data) {
        for (var project in data) {
            //Each Project
            Gde[data[project].name] = {};
            getGAPIK(data[project].columns_url, function (data, pro) {
                for (var column in data) {
                    //Each Column
                    Gde[pro][data[column].name] = {};
                    getGAPIK(data[column].cards_url, function (data, col) {
                        for (var card in data) {
                            //Each Card
                            var cardNote = data[card].note;
                            var cardId = data[card].id;
                            Gde[pro][col][cardId] = { cardNote };
                        }
                    }, data[column].name);
                }
            }, data[project].name);
        }
    });
    return Gde;
}

function getGAPIK(url, func, keepIY) {
    $.ajax({
        url: url,
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            func(data, keepIY);
        },
        error: function () { },
        beforeSend: setGHHeader
    });
}

function getGAPI(url, func) {
    $.ajax({
        url: url,
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            func(data);
        },
        error: function () { },
        beforeSend: setGHHeader
    });
}

function setGHHeader(xhr) {
    xhr.setRequestHeader('Accept', 'application/vnd.github.inertia-preview+json');
    xhr.setRequestHeader('Authorization', 'token f29ec838673639aa53c5faa39cc8d0615a18be29');
}

---------------Update------------------
I managed to fix this due to Bergi, thanks btw, by replacing the return statement to callback a function after the biggest for loop was done, so:

function getGPD(url, func) {
var Gde = {};
getGAPI(url, function (data) {
    for (var project in data) {
        //Each Project
        Gde[data[project].name] = {};
        getGAPIK(data[project].columns_url, function (data, pro) {
            for (var column in data) {
                //Each Column
                Gde[pro][data[column].name] = {};
                getGAPIK(data[column].cards_url, function (data, col) {
                    for (var card in data) {
                        //Each Card
                        var cardNote = data[card].note;
                        var cardId = data[card].id;
                        Gde[pro][col][cardId] = { cardNote };
                    }
                }, data[column].name);
            }
        }, data[project].name);
    }
    func(Gde);
});
}

This works because it was returning a value, and then updating that value instead of just sending the value directly.