Getting a state object back from a angular $q deferred call when I should be getting a value

Question

I'm trying to get a value from a backend API into my controller using $q.when in angular. The function on my controller is calling a non-async function in a service that is invoking other functions to call the backend with the $http service.

$q.when will successfully log the response object but when I try to log the properties of the object, they come up blank. What do I need to do with this? I guess the values are being assigned before the response comes back but I thought the .then statement in $q when was supposed to take care of this?

Controller:

init();

function init(){

    $q.when(MyProfileService.fetchProfile()).then(function(response){

    // This logs the object and I can see the email property is populated:
    console.log("resolved with value:");
    console.log(response);

    // This comes up with blank value
    console.log("attempting to log response data:")
    console.log(response.user.email);

    });
}

MyProfileService:

function fetchProfile() {
    return ProfileService.getProfile()
    .then(function(response){

    var profileObject = ProfileSaveService.getData();

    var transRef =  { transientRef: profileObject.card.transientRef }

    // and pass it into the function for retrieving the estatement optin details.
    fetchEstatementStatus(transRef);

    return service;
    }).catch(function(error){
        console.error(error);
    });
}

function fetchEstatementStatus(transRef) {

    return HttpService.httpPost('/dash/v1/account/retrieveCommProfile', transRef)
    .then(function(response)  {

        service.user.email = response.data.userEmail;

        // This should return the service object with all the properties set:
        return service;
    })
    .catch(function(error) {
        return $q.reject(error);
    });

}

Is `ProfileSaveService.getData()` an async call? If so, transientRef will not be populated properly. Aslo, you pass `fetchEstatementStatus` a variable called `transRef` whereas you declared the variable `transientRef`, was this just a typo? — Aaron Pool, Dec 19 '16 at 17:43
ProfileSaveService.getData is not an async call. transientRef is populated properly. It should read: var transRef = { transientRef: profileObject.card.transientRef } — JamesNB, Dec 19 '16 at 18:22
It all works except for the issue I've pointed out where it will log response properly but not response.user.email. response.user.email comes up blank. — JamesNB, Dec 19 '16 at 18:25
I don't understand why you're returning `service`, `fetchProfile` should be returning the promise created by `fetchEstatementStatus`. — Aaron Pool, Dec 19 '16 at 18:40
Otherwise, `fetchProfile` will return before the `http` request is complete. — Aaron Pool, Dec 19 '16 at 18:41

score 0 · Accepted Answer · answered Dec 19 '16 at 18:56

You fire off the asynchronous fetchEstatementStatus(transRef); call but never wait for it. Instead, you immediately return the service. You need to return the promise from the then callback to make it wait:

function fetchProfile() {
    return ProfileService.getProfile().then(function(response){
        var profileObject = ProfileSaveService.getData();
        return fetchEstatementStatus({transientRef: profileObject.card.transientRef});
//      ^^^^^^
    }).catch(function(error){
        console.error(error);
    });
}

function fetchEstatementStatus(transRef) {
    return HttpService.httpPost('/dash/v1/account/retrieveCommProfile', transRef).then(function(response)  {
        service.user.email = response.data.userEmail;
        return service;
    });
}

Thank you. Must be Monday, not awake yet. You are a gem sir. — JamesNB, Dec 19 '16 at 19:21

Getting a state object back from a angular $q deferred call when I should be getting a value

1 Answers1