CODEWITHSUNDEEP
javascriptajaxangularjsservice
CaribouCode
CaribouCode

Reputation: 14398

Using $http callback inside AngularJS service

I have a simple Angular service that uses $http to make a call to an API.

app.service("MyService", function($http){

  this.api = function(obj){

    return $http.post("/some-route", obj).success(function(data){

      //process data in various ways here

      var returnObj = {
        complete: true,
        data: data
      };

      return returnObj;

    });

  }

});

In the $http callback, I process the data before returning it. When I call this service in my controller, I want to get that processed data.

The following only gives me the unprocessed data:

MyService.api(someObj).success(function(data){
  console.log(data);
});

How do I get the processed data from the callback?

Upvotes: 0

Views: 1208

Answers (2)

netrevisanto
netrevisanto

Reputation: 1121

I have tested up your code in a plunker, and guess what? Its working for me. Can you please confirm it, or send me more info, i'm glad if i could help.

Plunker

var app = angular.module('plunker', []);

app.service("MyService", function($http){

  this.api = function(obj){

    return $http.post("http://jsonplaceholder.typicode.com/posts", obj).success(function(data){

      //process data in various ways here
      console.log(data);
      var returnObj = {
        complete: true,
        data: data
      };

      return returnObj;

    });

  }

});

app.controller('MainCtrl', function($scope,MyService) {
  $scope.data = 'World';
  MyService.api({oi: true}).success(function(data){
    $scope.data = data
  });
});

Update: I have misunderstood your question. You want to process the data in the callback to manipulate it in your action. Your code dont work because success() actually returns a promise, but it dont change it, it returns the original one. The one to go for is the then(), which is chainable and returns the modified version of the promise. I've made changes to the plunker to reflect my new vision of the scenario. Here is the new code. Thanks for your time.

var app = angular.module('plunker', []);

app.service("MyService", function($http){

  this.api = function(obj){

    return $http.post("http://jsonplaceholder.typicode.com/posts", obj).then(function(data){

      //process data in various ways here
      console.log(data);
      var returnObj = {
        complete: true,
        data: data
      };

      return returnObj;

    });

  }

});

app.controller('MainCtrl', function($scope,MyService) {
  $scope.data = 'World';
  MyService.api({oi: true}).then(function(data){
    $scope.data = data
  });
});

New Plunker

Upvotes: 1

eladcon
eladcon

Reputation: 5825

The success function does not create a new promise, so your controller success callback is registered to the same promise as the service (the original one).

Instead you can use then, so it will create a new promise which will be resolved with your returnObj object:

// service
return $http.post("/some-route", obj).then(function(data){

// controller
myService.api().then(function(data) {

Upvotes: 1

Related Questions