Multiple JSON files in one Service (AngularJS)

Question

I have a Service in my angular app which gathers a JSON file with a football team's data.

angular.module('UsersApp').factory('SquadService', ['$http', function($http) { 

    return $http.get('squad/squad-bournemouth.json') 
            .success(function(data) { 
              return data; 
            }) 
            .error(function(err) { 
              return err; 
            }); 
}]);

1. Is it possible to get the same service (SquadService) to return data from multiple JSON files?

2. Is this advisable?

3. If so, how would you make multiple $http.get functions in the same service? If not, would it just be a case of having a separate service for every squad array, and calling them all individually in the controller, like so...?

   bournemouthService.success(function(data) {
   $scope.bournemouthSquad = data;
   });
   
   arsenalService.success(function(data) {
       $scope.arsenalSquad = data;
   });
   
   chelseaService.success(function(data) {
           $scope.chelseaSquad = data;
   });
   
   // and so on...
   

This seems like it goes against the DRY code principle, so wanted to know if there's a better way of doing this?

Thanks in advance

Answer 1

I think in your case it would make sense to create a single function that can be re-used of each team by simply passing in the parameter, instead of creating a function for each team (what would happen when teams are relegated/promoted?):

angular.module('UsersApp').factory('SquadService', ['$http', function($http) { 

  var getTeam = function(url){
    return $http.get(url); // returns a promise
  };

  return { 
    getTeam : getTeam 
  }
}]);

And in you controller:

SquadService.getTeam('squad/squad-bournemouth.json').then(
  function(data){
    // successcallback
    $scope.bournemouthSquad = data;
  },
  function(error){
    // errorcallback
  });   

I think this approach is slightly more generic as you will not have to create a new function for each team but can simply pass in the url as a parameter.

To keep all your urls in one place and make it more re-useable, you might consider placing them in a constant:

angular.module('UsersApp').constant('PLUrl', {
    bournemouth: 'squad/squad-bournemouth.json',
    arsenal: 'squad/squad-arsenal.json',
});