Angular typeahead response error

Question

I am implementing an input which allow to select multiple values as tags. I am working with angular-ui-bootstrap-typeahead

The following example with dummy data works fine:

view:

<script type="text/ng-template" id="form_field_ref">
 <div class='container-fluid' ng-controller="typeHeadTestCtrl">
     <input type="text" ng-model="selected"  typeahead="x.formatted_address for x in dynamicSearch($viewValue, field.displayName)"  class="form-control" typeahead-on-select='onSelect($item, field)'>
 </div>
</script>

part of controller:

        $scope.getLocation = function(val) {
          return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
            params: {
              address: val,
              sensor: false
            }
          }).then(function(response){
            console.log(response);
            return response.data.results.map(function(item){
              console.log(item);
              //items attribute=> address_components, formatted_address, place_id....
              return item;

            });
          });
        };

But when I try to connect to my actual data I get the following error:

TypeError: Cannot read property 'length' of undefined
at ui-bootstrap-tpls.js:3637
at processQueue (angular.js:13170)
at angular.js:13186
at Scope.$eval (angular.js:14383)
at Scope.$digest (angular.js:14199)
at Scope.$apply (angular.js:14488)
at $$debounceViewValueCommit (angular.js:20944)
at $setViewValue (angular.js:20916)
at HTMLInputElement.listener (angular.js:19632)
at HTMLInputElement.eventHandler (angular.js:3011)

Here is the code that fails:

view:

 <input type="text" ng-model="selected"  typeahead="x.theVal for x in dynamicSearch($viewValue, field.displayName)"  class="form-control" typeahead-on-select='onSelect($item, field)'>

the parts of the controller:

dynamicSearch() prepares what data to request on call of getDbRefDocs():

        $scope.dynamicSearch = function(searchTerm, name) {
          var allowed = {};
          var classString = "";
          allowed = datamodel.classes[$routeParams.class].attribute[name].allowed;
          for (key in allowed){
            classString = classString +  key + "|";
          }
          //remove last pipeline
          classString = classString.slice(0, -1);
          $scope.getDbRefDocs(searchTerm, name, classString);
        };

        $scope.getDbRefDocs = function(searchTerm, name, classString) {
          var url = '/api/v2/docs/' + classString;
          return $http.get(url, {
            params: {
              '>displayName': searchTerm,
              count: 5                      
            }
          }).then(function(response){
            var data = response.data.data;
            console.log('data:'+data);
            var requested = [];
            angular.forEach(data.requested, function(searchTerm, k, o) {
               requested.push(createDBOifNecessary(searchTerm));
            });
            $scope.item=[];
            $scope.options=[];
            $scope.options[name] = [];
            for (key in requested) {
              if (requested.hasOwnProperty(key)) {
                //This is the storing value
                //console.log(requested[key].cid);
                //this is the display value
                //console.log(requested[key].attributes.displayName[0]);
                $scope.options[name][key] = requested[key].attributes.displayName[0];
                $scope.item.push({
                  'theName':requested[key].attributes.displayName[0], 
                  'theVal':requested[key].cid
                }); 
              } 
            }   
            console.log('item:'+$scope.item);
            return $scope.item;

          });
        };

This last console.log returns the required data correctly!

For what I have been able to read the problem is related to the promise of the server request... but i am stuck!

Answer 1

I am not sure what was failing because i was receiving the expected data.

I think as someone mentioned it could be related to the manipulation of the response, delaying it...

In stead I added an event trigger that updates the array the typeahead attribute reads from and it now works fine. As well the typeahead-wait-ms is required cause my server response is between 20 and 30ms so just to be safe I set it to 200ms.

working code:

view: displays the values of the array "item"(item.theName == x.theName)

  <input type="text" ng-model="selected"  typeahead="x.theName for x in item" ng-change="dynamicSearch($viewValue, field.displayName)" typeahead-wait-ms="1000"  class="form-control" typeahead-on-select='onSelect($item, field)'>

Controller functions:

On ng-change ->dynamicSearch() =>define what data request and call the request

$scope.dynamicSearch = function(searchTerm, name) {
  var allowed = {};
  var classString = "";
  allowed = datamodel.classes[$routeParams.class].attribute[name].allowed;
  for (key in allowed){
    classString = classString +  key + "|";
  }
  classString = classString.slice(0, -1);
  $scope.getDbRefDocs(searchTerm, name, classString);
};

On call of getDbRefDocs() => i define values for the array "item"

$scope.getDbRefDocs = function(searchTerm, name, classString) {
  var url = '/api/v2/docs/' + classString;
  $http.get(url, {
    params: {
      '>displayName': searchTerm,
      count: 5                      
    }
  }).then(function(response){
    var data = response.data.data;
    var requested = [];
    angular.forEach(data.requested, function(searchTerm, k, o) {
       requested.push(createDBOifNecessary(searchTerm));
    });
    $scope.item=[];
    for (key in requested) {
      if (requested.hasOwnProperty(key)) {
        $scope.item.push({
          'theName':requested[key].attributes.displayName[0], 
          'theVal':requested[key].cid
        }); 
      } 
    }   
  });
};

When item is selected from the available options of "item" => typeahead-on-select='onSelect($item, field)' => I store item.theVal:

    $scope.onSelect = function (item, field) {
      field.theValues[field.theValues.length] = item.theVal;
    };