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

Question

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...">

Answer 1

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
        })
//...