Twice firing with external filtering in angular ui-grid

Question

I have finished this issue, however, I am faced with the problem of a weird triggering of applied filters. Let me try to explain to you. The first filter request looks like:

?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7  OPTIONS 200 xhr angular.js:11881    505 B   17 ms   
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7  GET 200 xhr Other   15.3 KB 92 ms   

We have options and we have get, it is fine. Next we apply the second filter and request looks like:

?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7  GET 200 xhr angular.js:11881    15.3 KB 94 ms   
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231 OPTIONS 200 xhr angular.js:11881    505 B   21 ms   
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231 GET 200 xhr Other   15.8 KB 48 ms   
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7  OPTIONS 200 xhr angular.js:11881    505 B   22 ms   

For some reason the request fired twice. Next we apply the third filter and the request looks like:

?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231 OPTIONS 200 xhr angular.js:11881    505 B   18 ms   
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231;statusId==5 OPTIONS 200 xhr angular.js:11881    505 B   19 ms   
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231 GET 200 xhr Other   15.8 KB 43 ms   
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231;statusId==5 GET 200 xhr Other   1.1 KB  27 ms   
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7  GET 200 xhr Other   15.3 KB 95 ms

And we can see how the request fired twice again but in the final it sends one more additional request with only the first filter.

Can anybody explain to me where my mistake is? Thanks in advance. My code for filters:

  gridApi.core.on.filterChanged( $scope, function() {
                // Declare vars
                var grid = this.grid;
                var columns = grid.columns;
            $scope.columnTitle = grid.columns[1].filters[0].term;
            $scope.columnDesc = grid.columns[2].filters[0].term;
            var columnType = grid.columns[3].filters[0].term;
            var columnStudy = grid.columns[4].filters[0].term;
            var columnPriority = grid.columns[5].filters[0].term;
            var columnSeverity = grid.columns[6].filters[0].term;
            var columnStatus = grid.columns[7].filters[0].term;
            var columnCreatedDate = grid.columns[8].filters[0].term;
            var columnModifiedDate = grid.columns[9].filters[0].term;

            // Create request for selectable filters
            var query = [];
            var string;
            function request (id, param) {

                if(param === "title==" || param === "description=="){
                    query.push(param + "*" + id + "*")
                } else {
                    query.push(param + id);
                }

                if (query.length <= 1){
                    return query
                } else {
                    string = query.join(";");
                    return string;
                }
            }

            // Define behavior for cancel filtering
            $scope.isfilterclear = true;

            angular.forEach(columns, function( col ) {
                if(col.filters[0].term){
                    $scope.isfilterclear = false;
                }
            });
            if($scope.isfilterclear) {
                $timeout(function() {
                    $rootScope.refresh()
                },500);
            }

            // Filter behavior for columns
            if($scope.columnTitle) {
                $scope.$watch('columnTitle', function (newVal, oldVal) {
                    // filterOptions.filterParam = 'title==*' + newVal + "*";
                    filterOptions.filterParam =  request(newVal, 'title==*');
                }, true);
                getData()
            }
            if($scope.columnDesc) {
                $scope.$watch('columnDesc', function (newVal, oldVal) {
                    // filterOptions.filterParam = 'description==*' + newVal + "*";
                    filterOptions.filterParam =  request(newVal, 'description==');
                }, true);
                getData()
            }
            if(columnType) {
                filterOptions.filterParam = request(columnType, 'eventTypeId==');
                getData();
            }
            if(columnStudy) {
                filterOptions.filterParam = request(columnStudy, 'studyId==');
                getData();
            }
            if(columnPriority) {
                filterOptions.filterParam = request(columnPriority, 'priorityId==');
                getData();
            }
            if(columnSeverity) {
                filterOptions.filterParam = request(columnSeverity, 'severityId==');
                getData();
            }
            if(columnStatus) {
                filterOptions.filterParam = request(columnStatus, 'statusId==');
                getData();
            }
            if(columnCreatedDate){
                filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
                getData()
            }
            if(columnModifiedDate){
                filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
                getData()
            }


        });

Answer 1

You are calling getData() inside each column filter, that's why your request firing two or more times. Take out your function like this:

 // Filter behavior for columns
                if($scope.columnTitle) {
                    $scope.$watch('columnTitle', function (newVal, oldVal) {
                        filterOptions.filterParam =  request(newVal, 'title==*');
                    }, true);
                }
                if($scope.columnDesc) {
                    $scope.$watch('columnDesc', function (newVal, oldVal) {
                        filterOptions.filterParam =  request(newVal, 'description==');
                    }, true);
                }
                if(columnType) {
                    filterOptions.filterParam = request(columnType, 'eventTypeId==');
                }
                if(columnStudy) {
                    filterOptions.filterParam = request(columnStudy, 'studyId==');
                }
                if(columnPriority) {
                    filterOptions.filterParam = request(columnPriority, 'priorityId==');
                }
                if(columnSeverity) {
                    filterOptions.filterParam = request(columnSeverity, 'severityId==');
                }
                if(columnStatus) {
                    filterOptions.filterParam = request(columnStatus, 'statusId==');
                }
                if(columnCreatedDate){
                    filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
                }
                if(columnModifiedDate){
                    filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
                }

                getData();