CODEWITHSUNDEEP
angularjs
Tasos
Tasos

Reputation: 7577

Get $http response error status on AngularJS

I follow an online course in AngularJS and I am on the first steps of learning it.

I am trying to call an API after a form submission and based on the API response, show and hide some data.

What I try to do first is to check the status response in case it returns 500 error for invalid API call. However, it seems I cannot do it.

Part of my service file:

  service.getMenuItem = function (shortName) {

    return $http.get(ApiPath + '/menu_items/' + shortName + '.json')
    .then(function successCallback(response) {
      return response.data;
    }, function errorCallback(response) {
      return response.status;
    })
  };

And on my controller:

SignupController.$inject = ['MenuService'];
function SignupController(MenuService) {
  var signupCtrl = this;

  signupCtrl.submit = function () {
    signupCtrl.response = MenuService.getMenuItem(signupCtrl.user.favouritedish);
    if ( signupCtrl.response == 500 ) {
      signupCtrl.dishError = true;
    }
  };
}

If I don't have any error on the $http call, everything work as it should. However, with the 500 error, it seems that it doesn't. I tried to log the signupCtrl.response on my controller and the value: 500 is there. But the if cannot be validated.

Version 1.5.8 on AngularJS

Upvotes: 0

Views: 5697

Answers (3)

Ben Bracha
Ben Bracha

Reputation: 1397

Your getMenuItem functions returns a promise, not the resolved value. So just use "then" on it, to check the resolved value.

MenuService.getMenuItem(signupCtrl.user.favouritedish).then(
   function(response) {
      if (response === 500) {
         signupCtrl.dishError = true;
      }
   }
);

Hope that helps. BTW, this code may be confusing, as "500" may be a "response.data" legit response. Therefore, it it better not to put a "error" callback and let the calling service handle errors itself. e.g.

 MenuService.getMenuItem(signupCtrl.user.favouritedish).then(
       function(response) {
          // Do something with response.data
       }
    ).catch(error) {
       singupCtrl.dishError = true;
    }

Upvotes: 4

Nadeem Khoury
Nadeem Khoury

Reputation: 937

$http service won't return promise. It will return a callback function either its success or error. so your service should look like this: 

function getMenuItem() {

            var deferred = $q.defer();

            $http.get(serviceBase + '/api/itemId').success(function (result) {
                deferred.resolve(result);
            }).error(function (err) {
                deferred.reject(err.status);

            });
            return deferred.promise;
        }

so in this case, you will resolve the result if it success. or you will resolve the status if it failed.

And in your controller, you should do the following: 

SignupController.$inject = ['MenuService'];
function SignupController(MenuService) {
  var signupCtrl = this;

  signupCtrl.submit = function () {
    signupCtrl.response = MenuService.getMenuItem(signupCtrl.user.favouritedish).then(function(response){

    //to do if it success
    }, function(errorStatus){
     signupCtrl.dishError = true;
    // to do with the error status
  };
}

Upvotes: 0

Nikhil Mohanan
Nikhil Mohanan

Reputation: 1260

Call a service function with .then() chaining method. 

SignupController.$inject = ['MenuService'];

    function SignupController(MenuService) {
      var signupCtrl = this;

      signupCtrl.submit = function() {

        MenuService.getMenuItem(signupCtrl.user.favouritedish)
          .then(function(result) {
            console.log(result.data)
          }, function(error) {
            console.log(error.data)
          })
      };
    }

Upvotes: 1

Related Questions