Angular async service

Question

I'm trying to do an ajax call via $http service inside a custom service. Then I want to customize, inside my controller, the data received in the custom service.

I wrap the customizing data function within $interval inside the controller: by this way I can customize my data when it is received.

The problem is: while the data is correctly logged in the service, the service seems like it doesn't return anything, although it should have returned (return response.data.Items)

So $interval loops indefinitely, and I can't customize my data.

var myApp = angular.module('MyApp', []);


myApp.service('ajaxcall', ['$http', function($http) {

    this.getjson = function () {

        $http.get("http://localhost:3000/one")
            .then(function(response) {

            console.log(response.data.Items);  //data logged correctly
            return response.data.Items;
        });
    }
}])

.controller('MyCtrl', ['$scope', '$interval', 'ajaxcall', function($scope, $interval, ajaxcall) {

    var new_items = ajaxcall.getjson();

    customize_data = $interval(function () {  //loops indefintely, new_items=undefined, why?
                         if (new_items) {
                             // customize data
                         }
                     }, 200);

    for(var i=0; i<new_items.length; i++) {
        $scope.items.push(new_items[i]);
    }
}]);

You could say: just move the customize data function in the custom service. First at all I don't want to do it. Secondly it doesn't even make sense: the $scope is not available in a service, so in any case I should wait for the $http reply.

use promise inside your service

Ebin Manuval
– Ebin Manuval

2016-05-31 11:15:48 +00:00
Commented May 31, 2016 at 11:15 — Ebin Manuval
– Ebin Manuval, Commented May 31, 2016 at 11:15

Pankaj Parkar · Accepted Answer · 2016-05-31 12:10:23Z

1

There were several things which I wanted to point out there.

Do return $http promise from this.getjson method, so that you can chain that promise while getting data from it.

this.getjson = function() {
  //returned promise here
  return $http.get("http://localhost:3000/one")
    .then(function(response) {
    console.log(response.data.Items); //data logged correctly
    return response.data.Items;
  });
}

var new_items = ajaxcall.getjson() line doesn't stored the data returned by getjson call, it will have undefined value as your currently getting. After finish up above change, new_items will hold promise return by ajaxcall.getjson. Thereafter use $q.when to keep eye on promise to get resolved & check for data inside its .then function.
```
customize_data = $interval(function() { //loops indefintely, new_items=undefined, why?
  $q.when(new_items).then(function(res) {
    if (customizeData) {
      //Do Logic
    }
  })
}, 200);
```

Side Note: You could face problem with this code, as you had 200ms time for each interval . Which can make multiple ajax calls before completing the last call(which would be kind of unexpected behaviour). To resolve such issue you could use $interval.cancel(customize_data); //once desired interval work has done

edited May 31, 2016 at 12:10

answered May 31, 2016 at 11:32

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

FrancescoN Over a year ago

Thanks for the reply. What's the best approach in your opinion? Someone has answered me to use a factory instead of a service, what do you think? About the side note: actually I've deleted $interval.cancel in the example because I don't know where to put it. Just below $interval ? I don't think it is safe. Or do you mean inside if (customizeData)?

FrancescoN Over a year ago

Ok it works by putting $interval.cancel inside $interval

Python Basketball · Accepted Answer · 2016-05-31 11:14:02Z

0

if you want to get the return data, you would write a factory instead of service!

code:

myApp.factory('ajaxcall', ['$http', function($http) {
  return {
    getjson : function () {

        $http.get("http://localhost:3000/one")
            .then(function(response) {

            console.log(response.data.Items);  //data logged correctly
            return response.data.Items;
        });
    }
}
}])

answered May 31, 2016 at 11:14

Python Basketball

2,3803 gold badges27 silver badges47 bronze badges

1 Comment

FrancescoN Over a year ago

I'll try it, but I've learned the service pattern on w3schools. Please give it a look on the "Create Your Own Service" section. w3schools.com/angular/angular_services.asp Why shouldn't it work in my case?

Alexander Kravets · Accepted Answer · 2016-05-31 11:27:22Z

0

You are misusing the promise returned by your asynchronous call. Here is what you need to do in your controller to change the data:

ajaxcall.getjson()
.then(function(new_items) {
    // customize data

    // this part should go here as well
    for(var i=0; i<new_items.length; i++) {
      $scope.items.push(new_items[i]);
    }
});

No need to use intervals or timeouts. Pay attention, ajaxcall.getjson() does NOT return your data, it returns the promise resolved with your items.

Read about the promises in angular.

edited May 31, 2016 at 11:27

answered May 31, 2016 at 11:19

Alexander Kravets

4,4351 gold badge19 silver badges15 bronze badges

Comments

Ebin Manuval · Accepted Answer · 2016-05-31 11:30:55Z

0

use promise when your making http calls from service

myApp.service('ajaxcall', ['$http', '$q', function($http, $q) {
    this.getjson = function() {
      var q = $q.defer();
      $http.get("http://localhost:3000/one")
        .success(function(data) {
          console.log(data); //data logged correctly
          q.resolve(data);
        })
      .error(function(err) {
        q.reject(err);
      });
      return q.promise;
    }
  }]);

changes in controller to wait for promise

ajaxcall.getjson()
 .then(function(data){
    console.log(data);
 });

answered May 31, 2016 at 11:30

Ebin Manuval

1,25514 silver badges33 bronze badges

Collectives™ on Stack Overflow

Angular async service

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related