Array not returning in angularstrap typeahead

Question

Array not returning in angularstrap typeahead

766 Views Asked by Hrafnkell Orri Sigurðsson At 04 November 2025 at 12:40

I'm following this plunker to create a typeahead in my project.

http://plnkr.co/edit/ZjpJxXkl0v5LhQdxcqWn?p=preview

app.js (not working with my API)

$scope.getAddress = function(viewValue) {
   var params = {address: viewValue, sensor: false};
   return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {params: params})
   .then(function(res) {
      console.log(res);
      return res.data.results;
    });
};

Index.html

<!-- Using an async data provider -->
  <div class="form-group">
    <label><i class="fa fa-home"></i> Address <small>(async via maps.googleapis.com)</small></label>
    <input 
     type="text" 
     class="form-control" 
     ng-model="selectedAddress" 
     data-animation="am-flip-x" 
     ng-options="address.formatted_address as address.formatted_address for address in getAddress($viewValue)" 
     placeholder="Enter address" 
     bs-typeahead>
  </div>

Inn my case i'm fetching data from a .net API. When i console log the results from the API I can see the array is returning from the API. but when i try to return it to the typeahead the data isn't displayed. however if i try to create an array of mock objects and then manually insert the data into the array aswell the results appear in the typeahead.

app.js (data is displayed)

$scope.getAddress = function(viewValue) {
   var params = {address: viewValue, sensor: false};
   return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {params: params})
   .then(function(res) {
      console.log(res);
      [{formatted_address: "Alabama"},{formatted_address: "Arkansas"},{formatted_address: res.data.results[0]}]
      return res.data.results;
    });
};

why could this be happening and how would i fix it?

Original Q&A

There are 1 best solutions below

**sylwester** · Answer 1

I can't see your full solution so it's difficult to say what did you missed but please see below for working solution.

var app = angular.module('app', ['mgcrea.ngStrap']);

app.controller('firstCtrl', function($scope, $http) {

  $scope.getAddress = function(viewValue) {
    var params = {
      address: viewValue,
      sensor: false
    };
    return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
        params: params
      })
      .then(function(res) {

        return res.data.results;
      });
  };

});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>

<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.1.3"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.1.3"></script>

<body ng-app="app">
  <div ng-controller="firstCtrl">
    <div class="form-group">
      <label><i class="fa fa-home"></i> Address <small>(async via maps.googleapis.com)</small>
      </label>
      <input type="text" class="form-control" ng-model="selectedAddress" data-animation="am-flip-x" ng-options="address.formatted_address as address.formatted_address for address in getAddress($viewValue)" placeholder="Enter address" bs-typeahead>
    </div>

  </div>
</body>

Array not returning in angularstrap typeahead

There are 1 best solutions below

Related Questions in ANGULARJS

Related Questions in ANGULAR-STRAP

Trending Questions

Popular # Hahtags

Popular Questions