Asynchronous request on bootstrap AngularJS uib-typeahead

Question

I am trying to search on the server side a name entered by the user, and give suggestions using bootstrap 3 uib-typeahead, however (although I hard coded the values to return - for testing purposes), no value is returning to the typeahead dropdown. My guess is that since this is an async request, any data is already returned by the time the request data is retrieved.

Is there any way how data could be retrieved from server side, whilst typeahead is listening?

$scope.test_search = function(test_name){
    var curr_url = '/plan/ajax/test/';

    var search_response =  $http.get(curr_url,{
        cache: true,
        params:{'name': test_name, 'csrfmiddlewaretoken': $cookies.csrftoken}
    }).then(function successCallback(response) {
        console.log(response.data);
        //return response.data;
        var test = [
            {country: "US", name : 'Alabama'}
        ];
        return test;

    }, function errorCallback(response) {
        alert('Error');
    });

},

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-lg-6">
    <pre>Model: {{new_ingredient_selected | json}}</pre>
    <input type="text"
           ng-model = "new_ingredient_selected"
           placeholder="test test"
           uib-typeahead="ingredient.name for ingredient in test_search($viewValue) |  filter:{name:$viewValue}"
           typeahead-loading="loadingLocations"
           typeahead-no-results="noResults"
           typeahead-on-select="onTypeaheadIngredientSelect($item, $label, $index)"
           typeahead-wait-ms ="400"
           class="form-control">

    <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
    <div ng-show="noResults">
      <i class="glyphicon glyphicon-remove"></i> No Results Found
    </div>
</div>

georgeawg · Accepted Answer · 2017-09-29 23:55:47Z

2

The test_search function needs a return statement:

$scope.test_search = function(test_name){
    var curr_url = '/plan/ajax/test/';

    var search_response =  $http.get(curr_url,{
        cache: true,
        params:{'name': test_name, 'csrfmiddlewaretoken': $cookies.csrftoken}
    }).then(function successCallback(response) {
        console.log(response.data);
        //return response.data;
        var test = [
            {country: "US", name : 'Alabama'}
        ];
        return test;

    }, function errorCallback(response) {
        alert('Error');
        //IMPORTANT
        //RE-THROW the error
        ͟t͟h͟r͟o͟w͟ ͟r͟e͟s͟p͟o͟n͟s͟e͟;͟
    });

    //IMPORTANT
    //RETURN the promise
    ͟ ͟r͟e͟t͟u͟r͟n͟ ͟s͟e͟a͟r͟c͟h͟_͟r͟e͟s͟p͟o͟n͟s͟e͟;͟

};

When a function lacks a return statement, it returns a value of undefined.

Also it is important to re-throw the error response in the rejection handler. Otherwise the rejected promise will be converted to a fulfilled promise that resolves with a value of undefined.

answered Sep 29, 2017 at 23:55

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Micallef Over a year ago

Resolved the problem by awaiting the callback from the async request and then returning the retrieved data.

Collectives™ on Stack Overflow

Asynchronous request on bootstrap AngularJS uib-typeahead

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related