Nesting promises with getJson

Question

Not sure why this doesn't work. I'm trying to nest some promises so that I can get the data from the playerHeader function. I understand that getJSON is asynchronous, but shouldn't the promises handle that?

$.when(loadViewFunctions(),
    $.Deferred(function(deferred) {
        $(deferred.resolve);
    })
).done(function() {

    //remove
    clearLoader();
});

function loadViewFunctions(){
    $.when(playerHeader(function(app_data){ 
        view_data = app_data;
    }),
    $.Deferred(function(deferred) {
        $(deferred.resolve);
    })
    ).done(function() {
        console.log(view_data);
    });
};

function playerHeader(){
    $.when(
        $.getJSON("/api/player_info.php?dev=1&key=56a26a18c775285f74c1879e26cceabb&player="+player_id+"", 
        function(player_data){

            var player_bg = post_player_data[0].player_background_image;

            append_data = "\
            <div class='profile_header' id='profile-header' data-bg='"+player_bg+"'>\
            </div>\
            ";
        }),
        $.Deferred(function(deferred) {
            $(deferred.resolve);
        })
    ).done(function() {

        return append_data;
    });
}

Is nesting promises a bad thing?

Answer 1

Firstly and most importantly, I can't see any "nested" promises. There's a single asynchronous operation $.getJSON that already returns a Promise - therefore, no need for $.when / $.Deferred etc

It seems your question is more about Promise chaining rather than nesting

The issues in your code:

• loadViewFunctions doesn't return a promise for $.when to wait on,
• same problem in playHeader ,
• you are also overusing $.when considering getJSON returns a (jQuery) promise,
• you execute playerHeader passing a callback function ... which playerHeader never calls ,
• your $.getJSON callback accepts player_data as an argument, but then tries to access post_player_data[0].player_background_image

Here are your functions with redundant code removed, notice the complete lack of $.when

loadViewFunctions().then(clearLoader);

function loadViewFunctions(){
    return playerHeader(function(app_data) {
        view_data = app_data;
        console.log(view_data);
    });
};

function playerHeader(){
    return $.getJSON("/api/player_info.php?dev=1&key=56a26a18c775285f74c1879e26cceabb&player="+player_id+"")
    .then(function(player_data) {
        var player_bg = post_player_data[0].player_background_image;
        return "\
            <div class='profile_header' id='profile-header' data-bg='"+player_bg+"'>\
            </div>\
            ";
    });
}

Here's the above written for modern javascript

loadViewFunctions().then(clearLoader);

function loadViewFunctions(){
    return playerHeader().then(app_data => {
        view_data = app_data;
        console.log(view_data);
    });
};

function playerHeader(){
    return $.getJSON(`/api/player_info.php?dev=1&key=56a26a18c775285f74c1879e26cceabb&player=${player_id}`)
    .then(player_data => `<div class='profile_header' id='profile-header' data-bg='${player_data[0].player_background_image}'></div>`);
}

edit: realised that view_data is a global, so, perhaps loadViewFunctions isn't as redundant as I first thought