How to wait for response in angularjs

Question

What I am doing is putting the filter on table (contains records). When I type into search box (used http get method), table data get updated as per search box. But when I type very fast, then I see in console 500 Internal Server error.

The main problem is before comming previous response I am firing the next request. There is no problem in result. Just console shows every http request. And in case of fast typing in search box it gets red.

What is the solution for it?

Answer 1

you could trottle your search input :

var app = angular.module('app', []);

    app.controller('TableController', function($scope, $http, $timeout) {
        $http.get('yourTableData.json').then(function(result){
            $scope.rows = result.data;
        });

        $scope.filterText = '';

        var temp = '',
            filterTextTimeout;
        $scope.$watch('searchText', function (val) {
            if (filterTextTimeout){
               $timeout.cancel(filterTextTimeout);
            }    
            temp = val;
            filterTextTimeout = $timeout(function() {
                $scope.filterText = temp;
            $http.get($scope.filterText).then(function(result){ 
            $scope.rows = result;
            }
            }, 250);
        })
    });

    <input id="searchInput" type="search" placeholder="search field" ng-model="searchText" />
    <div class="record" ng-repeat="row in rows | filter:filterText">
        <span>{{row.content}}</span>
    </div>