unable to use $q and promise

Question

I want to use the variable StatusASof to display data in the inserthtml function as below.

App.controller("SS_Ctrl", function ($scope, $http, $location, $window, $sce, $q) {

var ShiftDetails = []; 

   function getMAStatusASof(Id) {
        var defer = $q.defer();
        $http({
            method: 'GET',
            url: 'http://xx/api/Sxxx/GetMAStatusASof',
            params: { Id: Id }        
        }).then(function successCallback(response) {            
            StatusASof = response.data;           
            alert("getMAStatusASof : " + StatusASof);  --> Got data from API here in this alert.
            defer.resolve(response);
        }, function errorCallback(response) {});
    }

 function insertHtml(dates, ShiftDetails, Id) {

       // var promise = getMAStatusASof(Id); promise.then(

        var defer = $q.defer();
        getMAStatusASof(Id); 
    alert(StatusASof);  --> alert says empty here
    defer.resolve();       
        var Content;
        Content = '<table class="clsTable">  <tr>  <td rowspan="2">Cases ' + $scope.StatusASof + ' </td>  <td rowspan="2">Total</td> ';
        for (var i = 0; i <= 6; i++) {
            if (i == daySeq - 1) {            
                Content = Content + '<td colspan="3"  style="background-color:red"> {{dates[ ' + i + ']}} </td> ';
            }           
        }
}

but $scope.StatusASof is undefined while displaying the result. Looks like $q.defer is not working for me.

How can I continue the execution of code after getting data only from the getMAStatusASof(Id);

Can somebody help here.

Jazib · Answer 1 · 2019-04-03T11:36:30.360

1

Update

you need to return defer.promise;

  function getMAStatusASof(Id) {
    var defer = $q.defer();
    $http({
        method: 'GET',
        url: 'http://xx/api/Sxxx/GetMAStatusASof',
        params: { Id: Id }        
    }).then(function successCallback(response) {            
        StatusASof = response.data;           
        alert("getMAStatusASof : " + StatusASof);  --> Got data from API here in this alert.
        defer.resolve(StatusASof);
    }, function errorCallback(response) {
         deferred.reject(false); 
    });
    return defer.promise; 
}

and the you can use this function like :

getMAStatusASof(Id).then(function(res){
  if(res){
    $scope.StatusASof = res;
  }
})

edited Apr 03 '19 at 11:36

answered Apr 03 '19 at 08:40

Jazib

1,343
13
27

Instead of returning defer.promise; at the end of the function, it's better to not use $q at all. $http already returns a promise, so there's no need to wrap it into another promise. – Daniël Teunkens Apr 03 '19 at 09:03
@DaniëlTeunkens agree with you but OP was about $q not working – Jazib Apr 03 '19 at 09:08
I've updated but $scope.StatusASof is undefined while displaying the result as I mentioned earlier. – user11130182 Apr 03 '19 at 10:07
@user11130182 you're not using `$scope` with `StatusASof`. change it like `$scope.StatusASof = response.data;` – Jazib Apr 03 '19 at 10:11
Still undefined in the result and the alert is executing first after that it is fetching data from the API call. How can I continue the execution of code after getting data only from the getMAStatusASof(Id); – user11130182 Apr 03 '19 at 10:38
@user11130182 ok you can see the data in the alert ? if so I can update my answer. let me know – Jazib Apr 03 '19 at 10:59
I'm getting data from API and alert also. $scope.StatusASof = response.data; – user11130182 Apr 03 '19 at 11:18
@user11130182 check now – Jazib Apr 03 '19 at 11:37

Daniël Teunkens · Accepted Answer · 2019-04-03T12:22:04.180

No need to use $q.defer() here...

Just do

function getMAStatusASof(Id) {
  return $http({
    method: 'GET',
    url: 'http://xx/api/Sxxx/GetMAStatusASof',
    params: { Id: Id }        
  })
  .then(function successCallback(response) {     
    return response.data;
  })
  .catch(function errorCallback(response) {
    return null;  //Effectively swallow the error an return null instead.
  });
}

Then, use

getMAStatusASof(Id).then(function(result) {
  console.log(result);
});
//No .catch, as we've caught all possible errors in the getMAStatusASof function

If you really would like to use $q.defer(), then the function would need to return defer.promise, like Jazib mentioned.

But as I said, since $http already returns a promise, doing the whole $q.defer() + return defer.promise thing is superfluous.

Instead, use that construction only when the thing you need to wrap isn't returning a promise on its own. E.g when you open a bootbox modal and want to be informed of when the user clicked the close button

function notifyMeOfClosing() {
  var deferred = $q.defer();
  bootbox.confirm("This is the default confirm!", function(result){ 
    if(result) {
      deferred.resolve();
    }
    else {
      deferred.reject();
    }
  });
  return deferred.promise;
}

I've updated but getting error as "TypeError: Cannot read property 'then' of undefined" at line getMAStatusASof(Id).then — user11130182, Apr 03 '19 at 10:00
The warning tells you that your function getMAStatusASof(Id) is returning undefined (nothing), so check your code again to see it your function is actually returning the return value from $http (which is a promise, which will have the .then property. The function I added here immediately returns something (namely return $http(...)). — Daniël Teunkens, Apr 03 '19 at 12:18

score 0 · Answer 3 · answered Apr 03 '19 at 12:01

0

Unable to update @Daniël Teunkens post with following code(from "}" to ")"). So adding as new answer.

getMAStatusASof(Id).then(function(result) {
   // your code here. your HTML content.
     ....
  console.log(result);
})

It will work hopefully.

answered Apr 03 '19 at 12:01

user2522503

178
3
12

unable to use $q and promise

3 Answers3