how to use a common service for different json data in angularjs?

Question

I created a service that fetches data from local json and use it in a controller to display it in browser. All are working fine. here is my code:

JS Code:

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

myApp.service("dataService", function($http, $q){
   var deferred = $q.defer();
   $http.get('json/link.json').then(function(data){
        deferred.resolve(data);
    });

   this.getData = function(){
     return deferred.promise;
   }
})
.controller("linkCtrl", function($scope, dataService) {
    var promise = dataService.getData();
    promise.then(function(data) {
        $scope.links = data.data;
    });
});

Now, i have another json link (for eg.: json/link2.json ) and i want to perform the same function. Is there any way to use the "dataService" service ( like changing the link ).

I don't want to re-create a new service which does the same function. Any idea to re-use the Service for different json data ?

Thanks in Advance

Have you tried passing the URL to the service?

Joey
– Joey

2015-09-02 14:57:14 +00:00
Commented Sep 2, 2015 at 14:57 — Joey
– Joey, Commented Sep 2, 2015 at 14:57
Do you need to cache the promise?

Ori Drori
– Ori Drori

2015-09-02 14:59:22 +00:00
Commented Sep 2, 2015 at 14:59 — Ori Drori
– Ori Drori, Commented Sep 2, 2015 at 14:59

Ori Drori · Accepted Answer · 2015-09-02 14:57:51Z

1

Just create a method you can pass url to:

myApp.service("dataService", function($http){
   this.getData = function(url){
      return $http.get(url); // this returns a promise
   };
})

Use it like this:

.controller("linkCtrl", function($scope, dataService) {
    var promise1 = dataService.getData('json/link.json');
    promise1.then(function(data) {
        $scope.links = data.data;
    });

    var promise2 = dataService.getData('json/link2.json');
    promise2.then(function(data) {
        $scope.links2 = data.data;
    });
});

answered Sep 2, 2015 at 14:57

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

Comments

Ahmet Zeytindalı · Accepted Answer · 2015-09-02 14:58:30Z

0

Try something like this

myApp.service("dataService", function($http){
 this.getData = function(link,callback){
 $http.get(link).then(function(data){
    if(callback)
      callback(data);
   });
});
myApp.controller("linkCtrl", function($scope, dataService) {
    dataService.getData('json/link.json', function(data){
      $scope.links = data.data;
    });
});

answered Sep 2, 2015 at 14:58

Ahmet Zeytindalı

4513 silver badges10 bronze badges

2 Comments

Arun AK Over a year ago

can you explain the service function used here?

Ahmet Zeytindalı Over a year ago

i defined service function with a callback function and a link param. after http.get returns some thing from link we provided we check callback funciton. if it exists we call it with data. on controller we are calling getData function of service with link and a function and we say that function expects a parameter. now callback = function(data) etc... and service used that callback function now that data value is comes from service

Collectives™ on Stack Overflow

how to use a common service for different json data in angularjs?

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related