CODEWITHSUNDEEP
angularjsionic-frameworkangular-promise
carpiediem
carpiediem

Reputation: 2028

How do I cache the response to my promise?

I'm creating an hybrid app with Ionic that will load some JSON files that are stored on the device. Since the same data will be used in several different states, I thought it would make sense to store the response to the JSON request and reuse it, rather than re-reading the JSON file over and over.

This question seems to address that scenario, but I can't seem to get it to work. Although the template works when I used a simpler $http.get().success() request, it never fills in since I started trying to use this service. 

app.factory('localJsonService', function($http, $q) {
  var localJsonService = {};

  localJsonService.returnLegislators = function() {
    if (this.legislators) {
      return $q.when(this.legislators);
    }
    return $http.get('/data/legislators.json').then(function(response) {
      this.legislators = response.data;
      return this.legislators;
    });
  }

  return localJsonService;
});

//old malfunctioning controller
app.controller('profileController', function($scope, $stateParams, localJsonService) {
  $scope.legislators = localJsonService.returnLegislators();
  $scope.legislator = $scope.legislators[$stateParams.seq_no-1];
  console.log($scope.legislator); //displays undefined
});

//EDIT: newer, working controller (but still loads JSON file on each new state)
app.controller('profileController2', function($scope, $stateParams, localJsonService) {
  localJsonService.getLegislators().then(function(legislators){
    $scope.legislator = legislators[$stateParams.seq_no-1];
  });
});

Is it just a simple change to the service that I'm missing? Or am I going about this the wrong way entirely? I'm running AngularJS v1.3.13, but I'm not opposed to a different version, if that will help.

Thanks for any help you can give me.

Upvotes: 1

Views: 122

Answers (2)

aorfevre
aorfevre

Reputation: 5064

If the service data response is not changing, I'd rather user localStorage to cache your response. I'll suggest you ngStorage, that makes it really easy to use localStorage and sessionStorage.

P.S: if datas are changing, then use sessionStorage, that is persistant upon session, but cleaned after app restart.

Example after injecting $localStorage:

Set a default value : 

 var jsonDefaultVariable = {};
     jsonDefaultVariable["myDatas"] = false;
 $localStorage.$default(jsonDefaultVariable);

Check for cache :

if($localStorage["myDatas"] !== false){
    factory.myDatas = $localStorage.myDatas;
}else{
   $http(....).success(function(data){
      $localStorage.myDatas = data;
      factory.myDatas = data;
   });

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

Use a promise callback and assign your variables in that callback:

localJsonService.returnLegislators().then(function(legislators){
    $scope.legislators = legislators;
    $scope.legislator = legislators[$stateParams.seq_no-1];
    console.log($scope.legislator); 
});

Upvotes: 2

Related Questions