While attempting to incorporate something similar to the Google Map example from the angular-ui bootstrap demo page, I encountered an issue where the results were not displaying in the dropdown menu.
If you'd like to view the full code, you can visit: http://plnkr.co/edit/eIM7UC4HrIUXxdET3CO0?p=preview
This is what has been implemented 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)
I am receiving the result back, but it's not displaying in the dropdown menu.
UPDATE: After applying the solution suggested by @Engineer
I encountered this error:
TypeError: Cannot call method 'replace' of undefined