How to store result from $http.get into a variable

Question

I have the following scenario, I need data from a particular url.I also need to save this datas into a variable that I can call everywhere in my controller. To overcome such issue, I have written a service like below :

app.service("userData", function ($http, $q) {

var deferred = $q.defer();

this.getUsers = function () {
    return $http.get('/users')
        .then(function (response) {
            deferred.resolve(response.data);
            return deferred.promise;
        }, function (response) { 
            deferred.reject(response);
            return deferred.promise;
        })
    ;
};
});

And then my controller looks like :

  app.controller('UserCtrl', function($scope, $q, userData) {
  var myData = userData.getUsers()
  .then(
      function (result) {
          $scope.users = result;
      },
      function (error) {
          console.log(error.statusText);
      }
  );
  console.log(myData)
  });

It prints :

print screen

So how can i store data into a variable which is accessible all over the controller ? Thanks..

Welcome to the wonderful world of **async**! You can't do that. http://blog.slaks.net/2015-01-04/async-method-patterns/ — SLaks, Apr 17 '16 at 18:36
`$http.get` already returns a promise. Your `deferred` is completely useless — SLaks, Apr 17 '16 at 18:37

thegio · Answer 1 · 2016-04-18T23:43:21.383

1

I suggest you something like that:

    angular.module("app").factory("userService", userService);

    userService.$inject = ["$http", "$q"];

function userService($http, $q) {
    var deferred = $q.defer();
    var promise = null;
    var currentUser = null;
    return {
        getUserInfo: function () {
            if (promise) {
                deferred.resolve(currentUser);
                return (currentUser) ? deferred.promise : promise;
            }
            else {
                promise = $http.get("http://swapi.co/api/people/1/").then(function (response) {
                    return currentUser = response.data.name;
                });
                return promise;
            }    
        }
    }
}

you can call then any time userService.getUserInfo() to get the cached data.

   .config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/view1', {
            templateUrl: 'view1/view1.html',
            controller: 'View1Ctrl',
            controllerAs: 'vc'
        });
    }])

    .controller('View1Ctrl', function (userService) {
            var vm = this;
            userService.getUserInfo().then(function (result) {
                vm.name = result
            }, function (err) {
                vm.name = err
            });
        });

I create a git repository to test it out: https://github.com/leader80/angular-cache-service

I hope it helps

edited Apr 18 '16 at 23:43

answered Apr 17 '16 at 18:38

thegio

1,233
7
27

Actually, that's also wrong; calling it before the request finishes will send two requests. You need to cache the promise. – SLaks Apr 17 '16 at 18:47
I wrote it wrong, I meant call userService.getAuthenticated, it is returning a promise. ( corrected my sentence thanks) – thegio Apr 17 '16 at 18:53
No; you can still fire multiple requests. – SLaks Apr 17 '16 at 18:54
I got your point, let me try to correct it (but the question was actually not that) – thegio Apr 17 '16 at 18:57
Just tried it but doesnt work. I have also an " undefined " field .. – Daniel Apr 17 '16 at 19:26
now should be okay :) – thegio Apr 17 '16 at 20:14
Im afraid no thegio :/ Same issue .. – Daniel Apr 17 '16 at 20:33
you are doing something wrong because is working perfectly, I tried with open API, check my answer. – thegio Apr 18 '16 at 22:27
I worked with your github project but it also prints the following at the console : http://i.imgur.com/fsd3hbJ.png – Daniel Apr 19 '16 at 13:59
are you using the correct URL? http://swapi.co/api/people/1/ – thegio Apr 19 '16 at 14:05
But when i edit the userService and try to return cachedUser = response.data; instead of cachedUser = response.data.name; i have the following : http://i.imgur.com/nY8eWQN.png – Daniel Apr 19 '16 at 14:07
Yes the URL is correct and when i test it, its OK – Daniel Apr 19 '16 at 14:09
you are returning an array of objects and not just one. return cachedUser = response.data[0].userName - you should close the question an open a new one. – thegio Apr 19 '16 at 14:10

How to store result from $http.get into a variable

1 Answers1