Angular-UI typeahead results not showing in dropdown

Question

Im using Angular-ui typeahead component to hit an autocomplete API, and I'm parsing the data I get back into an array called resp. However, Im not seeing the data getting passed to the autocomplete dropdown in the UI. BTW, the controller has a console.log that displays the data correctly, so i know its returning from the api call.

Here is my controller function:

$scope.getLocationForSearch = function(locationString){

    $scope.locationString = locationString;
    var url = '/autoComplete/' + locationString ;
    $http({
        method: 'GET',
        url: url            
    }).then(function successCallback(response) {
        console.clear();
        var resp = response.data.RESULTS.map(function(item){
            console.log(item.name);
            return item.name;
        });

        return resp;

      }, function errorCallback(response) {
        console.log(response); 
    });     
}

and in my HTML:

    <div class="input-group">
        <input 
            type="text" class="form-control" ng-model="asyncSelected" placeholder="Search city or zip code"
            uib-typeahead="item for item in getLocationForSearch($viewValue)"/>
        <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
        <div ng-show="noResults">
          <i class="glyphicon glyphicon-remove"></i> No Results Found
        </div>
        <span class="input-group-btn">
            <button class="btn btn-default" name="search" ng-model="asyncSelected" type="submit" ng-click="getWeather(asyncSelected)">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
            </button>
        </span>
    </div><!-- /input-group -->

There are several posts on here for this same issue but none really answer my specific problem. Any help is appreciated.

Werner

like @beaver said, you need to return a $promise – Fluorescence

Answer 1

Your function getLocationForSearch() is not good: it has to return a promise to uib-typeahead directive. So working code is:

  $scope.getLocationForSearch = function(locationString) {

    $scope.locationString = locationString;
    var url = '/autoComplete/' + locationString ;

    return $http({
      method: 'GET',
      url: url
    }).then(function successCallback(response) {
      console.clear();
      return response.data.results.map(function(item) {
        console.log(item.name);
        return item.name;
      });
    }, function errorCallback(response) {
      console.log(response);
    });
  }

Here is a working example on Plunker:

http://plnkr.co/edit/v67vR8f3nHImGSoAUyBd?p=preview

Kiddush

I initially had this same code and really am not sure how this is different than what I have. I just added the resp variable to debug what was being returned. I changed it back but it didn't work. Also, 'results' should be in all caps...I know that doesn't change much, but that is how the json object is returned. No errors in the console btw. – Werner

You have to return the output of $http() function which is a promise, see docs.angularjs.org/api/ng/service/$http. Instead, you tried to return resp which is the response in the resolved promise. That is a different thing. – Kiddush

ohhh...return $http({... I see now. Thanks for your help! – Werner

Thanks for the help. This is a true and tested solution. – Mescaline