Search code examples
javascriptangularjsangularjs-directiveangularjs-scopeangularjs-service

In my service-factory I lookup up a large dataset - I want to persist it and check for its existence to avoid calling it again


My service (factory) makes an API call and assigns response data to a variable:

    .factory('MedicationMatchingNamesFactory', 
                ['$http', '$q', 'MedicationDisplayNamesFactory', 
                    function MedicationMatchingNamesFactory($http, $q, MedicationDisplayNamesFactory){

        return {
            getMatchingNames: function(inputValue){

                var matches = [];

                // I thought this may be set as null so I'm able to 
                // differentiate it from the below array form (when exists)
                var allNames = null;

                    MedicationDisplayNamesFactory.getDisplayNames().then(
                            function(response){

                                // this is the large dataset - now as array
                                var allNames = response.data.displayTermsList.term;

                                angular.forEach(allNames, function(value, key){

                                    if(value.indexOf( inputValue ) !== -1){
                                        matches.push(value);
                                    }

                                });
                            }
                        );


                return matches;
            }
        };
        return MedicationMatchingNamesFactory;
    }])

I'm using Angular-UI's "ui-select" directive to search within this large dataset based on entered string.

In my controller:

        $scope.$on('inputStarted', function(event, value){
            if(value.length > 3){
                $scope.meds.displayNames = MedicationMatchingNamesFactory.getMatchingNames(value);
                console.log($scope.meds.displayNames);
            }
        });

Now, to avoid querying the API (actually call another service containing the call to API) every time the number of input characters is greater than 3, I think it would be great if I'm able to check whether allNames is null (empty, do call API) or it's an array (skip the call, just use that).

I tried moving the angular.forEach part outside the call and promise but then, obviously, nothing happens because it's not resolved yet on the first run.

Is there a way to have this allNames dataset checked before I do the API call?


Solution

  • Actually the solution to this problem is very simple: I just went with the sessionStorage which seems to fit perfectly my needs in this case as I need the big dataset persisted just for this session and it doesn't matter if it's lost on the next one. The goal is to prevent fetching it more than once, that is, more than necessary, as the values inside are not likely to be changed during that session.