CODEWITHSUNDEEP
javascriptangularjsionic-framework
Dev.W
Dev.W

Reputation: 2370

Ionic pass array to service

I have an Ionic application which allows the user to perform a search, I save the results from the search into a service and if that page is visited again and there is a result in the service from before the user should be redirected to the results page where the user can click to clear results to restart search.

My current code shows the data on the results page but when the click to reset is clicked it doesn't do anything, I am passing the results directly from my API to the $state so I do bypass the service but aswell as passing to the $state I also save the data to the service.

Pseudo Code***

my injected controller dependencies

.controller('SearchCtrl', function($scope, $http, $state, $ionicLoading, $ionicHistory, serviceName) {

if(serviceName.searchHistory){
      $state.go('app.searchResults', {items: {items: serviceName.getSearch}});
    } else {

$scope.beginSearch = function() {
          $http.post('https://domain/api/v1/search?token=' + localStorage.getItem("token"),$scope.search).then(function(successResponse){

            $scope.return = successResponse;
            $scope.searchResponse = $scope.return.data.data[0];

            serviceName.setSearch($scope.searchResponse.items);

            $state.go('app.searchResults', {items: {items: $scope.searchResponse.items}});

          });
      }
}
})

my service

angular.module('starter.services', [])

.factory('serviceName', function() {

    var searchHistory = [];

    return {

    getSearch: function(){
        return searchHistory;  
    },
    setSearch: function(data){
        var searchHistory = data;  
    },
    clearSearch: function(){
        searchHistory = [];
    }

    }

})

My results controller

.controller('resultsCtrl', function($scope, $http, $state, $ionicLoading, $stateParams, $ionicPopup, serviceName) {

  $scope.item = $stateParams.items.items;
  $scope.data = {};

  $scope.resetFilter = function(){

    serviceName.clearSearch();
    $state.go('app.beginSearch');

  }

})

Upvotes: 0

Views: 987

Answers (1)

Manu Obre
Manu Obre

Reputation: 2294

You should not use an Array as $stateParameters, they work like a query string parameters.

And alternative for what you want to achieve could be this one:

Redirect the user to the 'app.searchResults' state.

.controller('SearchCtrl', function($scope, $http, $state, $ionicLoading, $ionicHistory, serviceName) {

if(serviceName.searchHistory){
      $state.go('app.searchResults');
    } else {

$scope.beginSearch = function() {
          $http.post('https://domain/api/v1/search?token=' + localStorage.getItem("token"),$scope.search).then(function(successResponse){

            $scope.return = successResponse;
            $scope.searchResponse = $scope.return.data.data[0];

            serviceName.setSearch($scope.searchResponse.items);

            $state.go('app.searchResults', {items: {items: $scope.searchResponse.items}});

          });
      }
}
})

And in its controller, load the result from your custom service.

.controller('resultsCtrl', function($scope, $http, $state, $ionicLoading, $stateParams, $ionicPopup, serviceName) {

      $scope.item = serviceName.getSearch();
      $scope.data = {};

      $scope.resetFilter = function(){

        serviceName.clearSearch();
        $state.go('app.beginSearch');

      }

    })

UPDATE:

In your service your are using var inside your update method, what means that you are creating a new reference of searchHistory . You should remove the var in order to keep the reference.

angular.module('starter.services', [])

.factory('serviceName', function() {

    var searchHistory = [];

    return {

    getSearch: function(){
        return searchHistory;  
    },
    setSearch: function(data){
        searchHistory = data;  
    },
    clearSearch: function(){
        searchHistory = [];
    }

    }

})

Upvotes: 2

Related Questions