Passing variable between functions in a service in angularjs

Question

I have been searching for an answer to this, and cannot seem to find anything. I have a service, in the first block I am successfully logging a url that I then need to pass into my getData() function. But it comes back undefined, I have tried the method below, and I tried moving the first $http.get into the controller where I am calling it, as well as moving the first $http.get into the getData() function. Am I going about this all wrong?

di.service('testService', function($http) {
    $http.get('https://us.api.data/tichondrius?locale=en_US&apikey=xxxxxxxx').
    then(function(response) {
        var urlToJsonFileUncut = response.data.files[0].url;
        console.log(urlToJsonFileUncut);
        urlToJsonFile = urlToJsonFileUncut.slice(7);
        console.log(urlToJsonFile);
        return urlToJsonFile;
    });
    this.getData = function(urlToJsonFile) {
        console.log(urlToJsonFile);
        return $http.get('http://localhost:1337/' + urlToJsonFile).
    then(function(response) {
        console.log(response.data.realms[0].name);
        return response.data.realms[0].name;
    });
}});

whyyie · Accepted Answer · 2016-10-28 16:24:52Z

1

$http is an async request. so you need to chain it inside the first request to ensure the value of first response is available when second request is called.

di.service('testService', function($http) {
  var getData = function () {
    return $http.get('https://us.api.data/tichondrius?locale=en_US&apikey=xxxxxxxx').
    then(function(response) {
      var urlToJsonFileUncut = response.data.files[0].url;
      console.log(urlToJsonFileUncut);
      var urlToJsonFile = urlToJsonFileUncut.slice(7);
      console.log(urlToJsonFile);

      $http.get('http://localhost:1337/' + urlToJsonFile).
      then(function(response) {
        console.log(response.data.realms[0].name);
        return response.data.realms[0].name;
      });
    });
  }

  return { getData: getData; }
});

edited Oct 28, 2016 at 16:24

answered Oct 28, 2016 at 16:17

whyyie

8024 silver badges10 bronze badges

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

Comments

Aravind · Accepted Answer · 2016-10-28 16:32:44Z

1

I would suggest you to use a factory instead of a service

Check out the below code

di.factory('testService', function ($http) {
    var variable_name;

    var serviceMethodName = function () {
        $http.get('https://us.api.data/tichondrius?locale=en_US&apikey=xxxxxxxx').
        then(function (response) {
            var urlToJsonFileUncut = response.data.files[0].url;
            console.log(urlToJsonFileUncut);
            urlToJsonFile = urlToJsonFileUncut.slice(7);
            console.log(urlToJsonFile);
            variable_name = urlToJsonFile;          //added 
        });
    }

    //modified parameter in below method
    var getData = function (variable_name) {

        var urlToJsonFile = variable_name;          //added 
        console.log(urlToJsonFile);
        return $http.get('http://localhost:1337/' + urlToJsonFile).
    then(function (response) {
        console.log(response.data.realms[0].name);
        return response.data.realms[0].name;
    });

    }

    //Exposes the two methods and accessbile through out the app unless it is modified
    return {
        serviceMethodName: serviceMethodName,
        getData:getData
    }

});

answered Oct 28, 2016 at 16:32

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

2 Comments

Truextacy Over a year ago

This worked for me as well, furthermore I need to also be able to pass in a variable to the service (or factory) from an ng-model, does needing to do that change which of these is more viable?

Aravind Over a year ago

Yes you can do that very simple inject your service to controller and use the service variable to assign to $scope. $scope.variable=testService.variable

Collectives™ on Stack Overflow

Passing variable between functions in a service in angularjs

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related