How to pass arguments through factories requests

Question

I use the RIOT GAMES API. And I use factories for my API calls. First of all I request the summonerName and then I use this name to get the id of this summonerName.

I tried with:

 $scope.summonerId = $scope.summoner.id;

And then access to this $scope but it doesn't work:

I recived this error with and undefined where I should recive the summonerId. (21694436) this is my summonerID :

https://euw.api.pvp.net/api/lol/euw/v1.3/stats/by-summoner/undefined/summary?season=SEASON2016&api_key=foo-bar-foo-bar-foo-bar 

I have got the following javascript code:

'use strict';

angular.module('mean.system').controller('SummonerController', ['$scope', '$http','APIAcces', '$stateParams',
  function($scope, $http, APIAcces, $stateParams) {        

  $scope.summonerName = $stateParams.summonerName;

  APIAcces.getSummonerByName($scope.summonerName).then(

        function successCallback(response) {

           $scope.summoner = response.data[$scope.summonerName.toLowerCase()];                
           $scope.summonerId = $scope.summoner.id;

           console.log($scope.summonerId); //returns id successfuly
           console.log(response);
        }, function errorCallback(error) {

           console.log(error);
           console.log(response);
        },  

//if I do.. APIAcces.getSummonerSummary('21694436').then( // it works!
        APIAcces.getSummonerSummary($scope.summonerId).then(

            function successCallback(response) {

              $scope.summoner2 = response.data[$scope.summonerId]; 
              console.log(response);

            },function errorCallback(error) {
              console.log(error);
              console.log(response);
            }
        ) //End APIAcces.getSummonerSummary

  ); //End APIAcces.getSummonerByName

  }
]);

I pass the argument summonerId and this factory it doesn't recognize it. I use this method:

angular.module('mean.system').factory('APIAcces',['$http','API_KEY',
        function($http,API_KEY){
            return {
                getSummonerByName:function(summonerName){
                    return     $http.get('https://euw.api.pvp.net/api/lol/euw/v1.4/summoner/by-name/'+summonerName+'?api_key='+API_KEY.KEY);
                },
                getSummonerSummary:function(summonerId){
                    return     $http.get('https://euw.api.pvp.net/api/lol/euw/v1.3/stats/by-summoner/'+summonerId+'/summary?season=SEASON2016&api_key='+API_KEY.KEY);
                },
            }
        }]).value('API_KEY',{
            KEY: 'foo-bar-foo-bar-foo-bar'
    });

I don't know, maybe it is an order of factories or something?

Answer 1

From your code, it's a typical async callback problem. you may have to first understand javascript callback and async architecture by reading somewhere else.

The reason is because

APIAcces.getSummonerSummary()

is being called when

APIAcces.getSummonerByName()

has not finished fetching, so the summonerId is undefined, it's just an async programming's nature.

so to correct this, you have chain the call together like this:

    APIAcces.getSummonerByName($scope.summonerName).then(
    function(response){
        var summonerId; //extract the id from response
        APIAcces.getSummonerSummary(summonerId).then(
            function(response){
              //response should contain the summary
            },
            function(error){
                //error of getting by id
            }
        );
    },function(error){
    //error of getting by name
});