AngularUI-Bootstrap's Typeahead Can't Read `length` Property of `undefined`

angular-ui, angular-ui-bootstrap, angularjs, javascript

Solution

This problem was two fold.

The first is that I was not returning the promise event (the `$http` call). The lack of a return statement (as @tobo points out) is what was causing the error directly. I needed to be returning the promise though, not the array.

The second is that I need to be using `.then` rather than `.success` for AngularUI-Bootstrap to pick up the results.

I ran across the following question: How to tie angular-ui's typeahead with a server via $http for server side optimization?

Which updated my function call to the below:

$scope.getTypeaheadValues = function($viewValue)
{
    return $http({
        method: 'GET',
        url: 'api/v1/person?name__icontains=' + $viewValue
    }).then(function ($response) {
        var output = [];

        console.log($data);

        $response.data.objects.forEach(function (person)
        {
            output.push(person.name);
        });

        console.log(output);
        return output;
    });
}

Problem

I am getting the following error when I attempt to get a typeahead values from AngularUI-Bootstrap, using a promise. ``` TypeError: Cannot read property 'length' of undefined at http://localhost:8000/static/js/ui-bootstrap-tpls-0.6.0.min.js:1:37982 at i (http://localhost:8000/static/js/angular.min.js:79:437) at i (http://localhost:8000/static/js/angular.min.js:79:437) at http://localhost:8000/static/js/angular.min.js:80:485 at Object.e.$eval (http://localhost:8000/static/js/angular.min.js:92:272) at Object.e.$digest (http://localhost:8000/static/js/angular.min.js:90:142) at Object.e.$apply (http://localhost:8000/static/js/angular.min.js:92:431) at HTMLInputElement.Va.i (http://localhost:8000/static/js/angular.min.js:120:156) at HTMLInputElement.x.event.dispatch (http://localhost:8000/static/js/jquery-1.10.2.min.js:5:14129) at HTMLInputElement.v.handle (http://localhost:8000/static/js/jquery-1.10.2.min.js:5:10866) ``` My HTML tag is: ``` <input type="text" class="form-control" id="guestName" ng-model="name" typeahead="name for name in getTypeaheadValues($viewValue)"> ``` With my `getTypeaheadValues` function doing the following: ``` $scope.getTypeaheadValues = function($viewValue) { // return ['1','2','3','4']; $http({ method: 'GET', url: 'api/v1/person?name__icontains=' + $viewValue }).error(function ($data) { console.log("failed to fetch typeahead data"); }).success(function ($data) { var output = []; $data.objects.forEach(function (person) { output.push(person.name); }); console.log(output); return output; }); } ``` I do not understand what AngularUI-Bootstrap is complaining about as being undefined. If I remove the comment on the top-most `return` the values show up fine. The `console.log` output in the `success` also return all the values I'm expecting in an array. What am I missing that would cause AngularUI-Bootstrap not see the returned array?

Original source