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?

you can keep a scope variable which will set to true when get call is in process and after running then method that variable will again become false i.e we can again make a call. — ngLover
– ngLover, Commented Jul 7, 2015 at 12:24
not sure if that's gonna work but when you apply angular filter you can use debounce option like that: <input type="text" ng-model="searchStr" ng-model-options="{debounce: 1000}"> which will only filter after 1000ms after you stopped typing — Einius
– Einius, Commented Jul 7, 2015 at 12:35
set boolean loading=true before searching, if boolean if true, do not search again. on getting results back set false... — Dmitri Algazin
– Dmitri Algazin, Commented Jul 7, 2015 at 12:56

Arno_Geismar · Accepted Answer · 2015-07-07 12:39:07Z

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>

Collectives™ on Stack Overflow

How to wait for response in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related