Adam91Holt Adam91Holt - 2 months ago 16
Javascript Question

AngularJS HTTP GET request on key up sometimes returns not the latest dataset

Im buulding a little app that executes the following function on a keyup event the only issue is if im typing fast then the last keypress may not be the latest dataset as the promise removes all data from the array I have and inserts the new data.

However say if I do the following

Request 1 - 150ms
Request 2 - 80ms

Then request 1 deletes all Request 2 values and inserts the request 1 values so the data is not up to date according to the last key press :(

Does anyone know a way around this? My code is below :)

Javascript:

app.controller('FlagsController', function ($scope, $http, $location, $window, $timeout) {

$scope.Products = []

$scope.GetRecords = function () {
try {
console.log('Get Records')
// Simple GET request example with promise: To get FeatureRelations
$http({
method: 'GET',
url: 'GetFeatureRelations.ashx?SearchQuery=' + $scope.SearchTerm
}).then(function (res) {
$scope.Products = []
for (var i = 0; i < res.data.length; i++) {
$scope.Products.push(res.data[i])
}
$scope.busy = false
$scope.showLoader = false
}, function (error) {
console.error(JSON.stringify(error))
$scope.busy = false
$scope.showLoader = false
})
}
catch (ex) {
console.error("Error: " + ex.toString())
}
}
})


HTML:

<input type="search" ng-keyup="GetRecords()" class="form-control" style="width: 30%" ng-model="SearchTerm" placeholder="Search Product Code, Name or Brand...">

xli xli
Answer

You can cancel the previous $http request whenever the method is called again. Inject $q and create a canceler promise.

var canceler;
$scope.GetRecords = function () {
    try {
        if (canceler) {
            canceler.resolve();
        }
        console.log('Get Records')
        // Simple GET request example with promise: To get FeatureRelations
        canceler = $q.defer();
        $http({
            method: 'GET',
            url: 'GetFeatureRelations.ashx?SearchQuery=' + $scope.SearchTerm,
            timeout: canceler.promise
        })
//...