typeahead angular ui - cannot read property 'length' of undefined

Question

I am using Angular-ui Bootstrap for my application. I use the typeahead directive. html: ``` <input type="text" class="pass_code_input" ng-model="SuppPrefix" Typeahead="ddl_item.Text for ddl_item in getData($viewValue)"/> ``` Controller ``` function AutoCompleteCtrl($scope,$http, AutoCompleteSrv) { $scope.getData = function (prefix) { AutoCompleteSrv.GetAutoComplete("Supplier", prefix).then(function (result) { var results_arr = []; angular.forEach(result.data, function (item) { results_arr.push({ "Val": item.Val, "Text": item.Text }); }); return results_arr }); }; }; ``` service: ``` function AutoCompleteSrv($http) { var _$http = $http; self = this; self.GetAutoComplete = function (DataType, Prefix) { var promise = _$http({ method: "GET", url: 'api/AutoComplete', params: { 'DataType': DataType, 'Prefix': Prefix } }).success(function (data, status, headers, config) { }).error(function (data, status, headers, config) { }); return promise; }; }; ``` I do recieve the data from server, but…

Accepted Answer

I just ran into this and just solved it. The key here is that in the example given on the angular site they "return" the $http results. That makes it confusing to look at but ultimately that is the return that matters. So in your case you are setting a variable to that return value so the return never gets returned. When your code is formatted in this way you will need to do 2 things to change it: The first is that the "return" statement is in the wrong place. The second is that the declaration for the returned value is also in the wrong place. Here is the non-working code from the example:

```
.....
then(function(res){
      var addresses = [];
      angular.forEach(res.data.results, function(item){
        addresses.push(item.formatted_address);
      });
      return addresses;
    });
```

Here is how I changed it to get it working.

```
var addresses = []
....
then(function(res){
      angular.forEach(res.data.results, function(item){
        addresses.push(item.formatted_address);
      });
    });
    return addresses;
```

This becomes more clear if you do not use the "then" but instead use the "success" and "error" functions. It then becomes obvious where the return statement should lie and where the returned value declaration should be. Writing the code that way and getting it to work is how I figured out the problem. NOTE that you should clear out the addressses value in the "then" function or else it will just keep appending more and more values.

typeahead angular ui - cannot read property 'length' of undefined

Solution

Problem

Related problems