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?
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;
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With