How to return value from service to controller in Angularjs

Question

i have a service as below

module.service('translationService', [
    "$resource",
    function($resource) {
        var This = this;
        This.params = 'HELLO';
        This.getTranslation = function() {
            var languageFilePath = 'sample.json';
            //return languageFilePath;
            $resource(languageFilePath).get(function(data) {
                var temp = "";
                if (This.params != "") {
                    angular.forEach(data, function(key, value) {
                        if (value == This.params)
                            temp = key;
                    });
                } else {
                    This.translation = "Pls input key";
                }
                This.translation = temp;
                return temp;
            });
        }
    }
]);

In controller i am calling service,

 This.translate = translationService.getTranslation();

Problem is when i debug temp has value , but when i return value becomes null. May be its inside one more function .get() and return is losing scope. But if I return languageFilePath as commented above (//return languageFilePath;), value is passing to controller.

Please help me how to return value.

Can you please [create a plunk](https://plnkr.co/) for this case? — Noy, Feb 18 '16 at 14:26

score 1 · Answer 1 · answered Feb 18 '16 at 14:45

1

Convert your getTranslation() method to return a promise.

module.service('translationService', [ '$q', '$resource', translationService ]);

function translationService ($q, $resource) {
  var This = this;

  This.params = 'HELLO';

  This.getTranslation = getTranslation;

  function getTranslation () {
    var deferred = $q.defer(),
        languageFilePath = 'sample.json';

    $resource(languageFilePath)
      .get(_onGetTranslationSuccess, deferred.reject);

    function _onGetTranslationSuccess (data) {
      var translation;

      if (This.params === '') {
        deferred.reject('Pls input key');
      } else {
        angular.forEach(data, function (key, value) {
          if (value === This.params) {
            translation = key;
          }
        });

        if (angular.isDefined(translation)) {
          This.translation = translation;
          deferred.resolve(translation);
        } else {
          deferred.reject('Translation not found');
        }
      }
    }

    return deferred.promise;
  }
}

You can then consume the promise in your controller and get the translation.

translationService.getTranslation().then(function (translation) {
  This.translate = translation;
});

answered Feb 18 '16 at 14:45

Sha Alibhai

881
5
7

You can just do $resource.get().$promise – cagica Feb 18 '16 at 14:58
how would you reject the promise in that case? – Sha Alibhai Feb 18 '16 at 15:02
You can use it like normal promise with then. Promise.then(function() { // all loaded }, function() { // one or more failed }); or promise.reject() or promise.resolve() – cagica Feb 18 '16 at 15:06
i dont think you've thought what youre saying through. what would returning $resource.get().$promise do differently to what i've done? how would you implement rejecting the promise if the params is empty or the translation key is not found? – Sha Alibhai Feb 18 '16 at 15:08
1

Maybe you're right, you're creating a promise, but not the one that you get from $resource. But you can get the response as a promise and then apply a filter, there are other ways of doing it. I wasn't saying that yours was bad, – cagica Feb 18 '16 at 15:21
Yep i understand what you're saying now, you were suggesting the logic could be deferred to the controller. Both are acceptable, I just like to keep everything contained together in the service so that my controllers are thin (to maintain proper MVC practices). This also increases reusability as you could use this getTranslation method in other places with predictable results. – Sha Alibhai Feb 18 '16 at 15:25
True, it's better your way. It was my fault I didn't understand the problem right ;) – cagica Feb 18 '16 at 15:27

score 0 · Answer 2 · answered Feb 18 '16 at 15:13

You can handle a variable within the service and then declare a function to retrieve the value from the controler:

.service('translationService', function($q, $http, ...) {
  var result= '';

  ...

  function someFunction(...) {
    ...
    result='translation';
    ...
  }

  ...

  return {
    getTranslation: function() {return result;}
  };
})

On the controller you can do this:

var res = translationService.getTranslation();

score -1 · Answer 3 · answered Feb 18 '16 at 14:32

-1

You have to return the value from your $resource function.

return $resource(languageFilePath)...

answered Feb 18 '16 at 14:32

cagica

678
4
23

Maybe, but or he does it with a promise or it needs to return some value. To access in the controller – cagica Feb 18 '16 at 15:00

How to return value from service to controller in Angularjs

3 Answers3

Linked