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; 
            }); 
}]);

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

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

I recommend using the angular $resource service: docs.angularjs.org/api/ngResource/service/$resource — Gavin Palmer
– Gavin Palmer, Commented Mar 1, 2016 at 15:50
Take a look at this: stackoverflow.com/questions/21024411/… — Boris Parnikel
– Boris Parnikel, Commented Mar 1, 2016 at 15:53
Gavin Palmer - thanks for the heads up on $resource. My problem is in the example I saw it was pulling in specific objects in an array (labelled with id's), in my case I want to pull in specific arrays from arrays. I tried this, wrapping each sub-array in an object so I could give them an id. This didn't work... — Paulos3000
– Paulos3000, Commented Mar 2, 2016 at 7:33

sjokkogutten · Accepted Answer · 2016-03-03 07:35:04Z

2

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',
});

edited Mar 3, 2016 at 7:35

answered Mar 1, 2016 at 18:48

sjokkogutten

2,1052 gold badges22 silver badges26 bronze badges

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

9 Comments

Paulos3000 Over a year ago

Thanks, that sounds like what I'm after... Two quick questions: 1) In the Service, you wrote return getTeam : getTeam - why not just return getTeam? 2) If I was to use the .constant() method (which looks very tidy), how would I call those url's in the controller? - Thanks

sjokkogutten Over a year ago

1) You are right, you can just as well use return getTeam, it's just a matter of personal preferences I guess. 2) Here's an useful SO article: stackoverflow.com/questions/24831323/angularjs-constants

Paulos3000 Over a year ago

Thanks for your help, much appreciated!

Paulos3000 Over a year ago

Actually, I've accepted your answer as it made perfect sense to me, but I tried it and it doesn't work... I'm getting this message in my console: TypeError: SquadService.getTeam is not a function - I copied and pasted your code... can you spot anything that might be wrong?

sjokkogutten Over a year ago

Ops. I also forgot a return statement in the function. Updated my answer

|

Collectives™ on Stack Overflow

Multiple JSON files in one Service (AngularJS)

1 Answer 1

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Linked

Related