CODEWITHSUNDEEP
javascriptangularjsangular-uiangular-ui-bootstrap
John Lim
John Lim

Reputation: 3109

can't display result on angular-ui typeahead

So i was trying to implement something like the google map example in the angular-ui bootstrap demo page, but i can't get the result display in the dropdown menu.

full code http://plnkr.co/edit/eIM7UC4HrIUXxdET3CO0?p=preview

this is what i have so far

HTML

<input required ng-model="asyncSelected" typeahead="address for address in getUserData($viewValue) | filter:$viewValue" type="text" placeholder="e.g john, david">

angular controller

  $scope.getUserData = function(val) {
            return $http.get('/sessionHandler/userProfileNameAndPicture/'+val, {
            }).then(function(userData){
              var addresses = [];
              console.log(userData) // see picture below 
              angular.forEach(userData.data, function(item){
                addresses.push(item);
              });
              return addresses;
            });
          };

console.log(userData) enter image description here

i got the result back but i can't display it on the dropdown menu.

UPDATE: after apply the answer from @Engineer enter image description here

i got this error: TypeError: Cannot call method 'replace' of undefined

enter image description here

Upvotes: 1

Views: 376

Answers (1)

Engineer
Engineer

Reputation: 48793

From the pic you can see, that there is no "results" property(you use it in .forEach ) of the data array. Try to change your code to below one:

angular.forEach(userData.data, function(item){
                         //  ^--------   '.results' is removed

Upvotes: 1

Related Questions