Resolve array getting duplicated on every state change with UI-Router

Question

I'm running an app where the navigation includes a multilingual link that triggers a state change.

The problem that I'm running into, is that on every state change from one language to the other, the array comming from the state resolve, gets duplicated.

For example:

First load = 8 items
First state change = 16 items
Second state change= 24 items
...

I've created a Plunker to replicate the issue.

Here's my state code:

.config(function($stateProvider) {


  $stateProvider.state('fair', {
    url: '/fair/{fair}',
    resolve: {
      fair: function(SearchService, $stateParams) {
        var string = $stateParams.fair.replace(/-/g , "");
        var finalstring = string.replace(/liste/g , " ");
        return SearchService.getAllExhibitors(finalstring);
      }
    },
    views: {
      'header': {   
        templateUrl: 'header.htm',
        controller:'appCtrl'   
      },
      'main':{    
        templateUrl: 'fair.htm',
        controller: 'appCtrl'
      }    
    }
  })

  .state('fairde', {
    url: '/de/fair/{fair}',
    resolve: {
      fair: function(SearchService, $stateParams) {
        var string = $stateParams.fair.replace(/-/g , "");
        var finalstring = string.replace(/liste/g , " ");
        return SearchService.getAllExhibitors(finalstring);
      }
    },
    views: {
      'header': {   
        templateUrl: 'headerde.htm',
        controller:'appCtrl'      
      },
      'main':{    
        templateUrl: 'fairde.htm',
        controller: 'appCtrl'
      }    
    }
  })

And the factory:

.factory("SearchService", function($http, $q) {  

  var service = {
    flatexhibitors : [],
    datafairs : [],
    getAllExhibitors : function (wop) {
      var deferred = $q.defer();
      var searchindex = wop;
        var url = '../register/backend/databaseconnect/getexhibitors.php';
        var config = {
            params: {
                search: searchindex
            },
            cache:true
        };
        $http.get(url, config).then(function (data) {
          service.datafairs = data.data.rows;
          for (var i in service.datafairs) {
            service.flatexhibitors.push(service.datafairs[i].doc);
          };
          deferred.resolve(service.flatexhibitors);
        }, function (error) {
          console.log(error);
          deferred.reject(error);
        });
        return deferred.promise; 
    }

  }
  return service;

})

Don't understand why you need 2 separate arrays and don't just return `data.data.rows` in the `then()` — charlietfl, Jul 29 '17 at 15:00

Yash Ganatra · Accepted Answer · 2017-07-29T13:58:31.933

You have used your SearchService and you are pushing data into it. Remember factory gets initialized only once it means it will initialize your service variable only once which has flatexhibitors and datafairs you are injecting same service in different state resolve, so what it will do... for an example in first injection you have this

/*
service = {
  flatexhibitors : [],
  datafairs : [],
  and 
  <your function>

}
after first injection your variable will be
service = {
  flatexhibitors = [array] // not null
  datafairs = [arra] //not null
}
*/

so when you inject it in second controller or service or resolve function which you are doing remember your variable wont be null.

so you can do and set it to null if you want it to be null always just like this..

.factory("SearchService", function($http, $q) {  

  var service = {
    flatexhibitors : [],
    datafairs : [],
    getAllExhibitors : function (wop) {
      var deferred = $q.defer();
      //setting to null
      this.flatexhibitors = [];
      this.datafairs = [];
      var searchindex = wop;
        var url = 'https://openwallsgallery.com/cors/getexhibitors.php';
        var config = {
            params: {
                search: searchindex
            },
            cache:true
        };
        $http.get(url, config).then(function (data) {
          service.datafairs = data.data.rows;
          for (var i in service.datafairs) {
            service.flatexhibitors.push(service.datafairs[i].doc);
          };
          deferred.resolve(service.flatexhibitors);
        }, function (error) {
          console.log(error);
          deferred.reject(error);
        });
        return deferred.promise; 
    }

  }
  return service;

})

Using $q.defer() with `$http` is an anti-pattern since `$http` already returns a promise — charlietfl, Jul 29 '17 at 14:47
yes you are right but I have copied his code and not updated his function — Yash Ganatra, Jul 29 '17 at 14:49
@charlietfl I got told to use $q in addition to http [here](https://stackoverflow.com/questions/45355474/bad-timing-or-order-of-functions-with-resolves-on-ui-router) : // — Eric Mitjans, Jul 29 '17 at 16:37

Resolve array getting duplicated on every state change with UI-Router

1 Answers1