Angular resolve functions using same api call

Question

I have a resolve object in UI-router working correctly; however my current setup makes two separate API calls to the same source. I don't want to cache the data because it is frequently changing, but I would like both functions to pull from one data api call. Here is my current setup.

Basically one function gets all results and one does some looping through the results to create an array.

resolve: {

            recipeResource: 'RecipeResource',

            getRecipeData: function($stateParams, recipeResource){
                var recipeId = $stateParams.id;
                var getData = function(){
                    var data = recipeResource.get({recipeId: recipeId}).$promise;
                    return data;
                }
                return {
                    recipeId: recipeId,
                    getData: getData

                }

            },

            recipe: function($stateParams, recipeResource, getRecipeData){
                return getRecipeData.getData();
            },
            subCatArray: function($stateParams, recipeResource, getRecipeData){

                var data = getRecipeData.getData().then(function(value){
                    var ingredients = value.data.ingredients;
                    var log = [];
                    angular.forEach(ingredients, function(value, key) {
                      if(value){  
                        if(value.subCategory){
                        log.push(value.subCategory);
                         };
                    };  
                    }, log);
                    return $.unique(log.concat(['']));
                });
                return data;
            }

        }

AWolf · Accepted Answer · 2015-08-03 22:06:47Z

You could use nested resolves. First get all entries and then use that resolved data in your subCatArray resolve to do additional filtering.

Then you'll only have one api call.

Please have a look at the demo below or in this jsfiddle.

angular.module('demoApp', ['ui.router'])
.factory('dummyData', function($q, $timeout) {
    return {
        getAll: function() {
            var deferred = $q.defer(),
                dummyData = ['test1', 'test2', 'test3', 'test4'];
            
            $timeout(function() {
                deferred.resolve(dummyData);
            }, 1000);
            return deferred.promise
        }
    }
})
.config(function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/');
    
    $stateProvider
    .state('main', {
        url: '/',
        template: '{{all}} {{filtered}}',
        resolve: {
            'allEntries': function(dummyData) {
                return dummyData.getAll().then(function(data) {
                    return data;
                });
            },
           'filteredEntries': function(allEntries, $filter) {
                return $filter('limitTo')(allEntries, 2);
            }
        },
        controller: function($scope, allEntries, filteredEntries) {
            $scope.all = allEntries;
            $scope.filtered = filteredEntries;
        }
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<div ng-app="demoApp">
    <div ui-view=""</div>
</div>

Collectives™ on Stack Overflow

Angular resolve functions using same api call

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related