Typahead eckig ui - Eigenschaft 'Länge' von undefined nicht lesen

Question

Ich benutze Angular-ui Bootstrap für meine Anwendung. Ich benutze die Typahead-Direktive.

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; 
    }; 
}; 

ich die Daten noch empfangen von Server, aber ich kann es nicht auf dem Bildschirm anzeigen. Wenn ich Debugger in Chrom Entwickler-Tools laufen, bekomme ich den nächsten Fehler:

TypeError: Cannot read property 'length' of undefined 
at http://localhost:52145/js/libs/ui-bootstrap-tpls-0.11.0.min.js:13:12650 
at m.promise.then.u (http://localhost:52145/js/angular/angular.min.js:97:280) 
at m.promise.then.u (http://localhost:52145/js/angular/angular.min.js:97:280) 
at http://localhost:52145/js/angular/angular.min.js:98:417 
at h.$eval (http://localhost:52145/js/angular/angular.min.js:108:482) 
at h.$digest (http://localhost:52145/js/angular/angular.min.js:106:62) 
at h.$apply (http://localhost:52145/js/angular/angular.min.js:109:287) 
at HTMLInputElement.l (http://localhost:52145/js/angular/angular.min.js:133:191) 
at http://localhost:52145/js/angular/angular.min.js:31:32 
at q (http://localhost:52145/js/angular/angular.min.js:7:386) 

Ich habe an mehreren Stellen für Lösung gesucht, wie that, und auch die Anweisungen in der Bootstrap-ui-Homepage gefolgt Schritt für Schritt. Was habe ich falsch gemacht?

Answer 1

Ich bin gerade reingelaufen und habe es gerade gelöst. Der Schlüssel hier ist, dass sie in dem Beispiel, das auf der Winkelsite angegeben ist, die $ http-Ergebnisse "zurückgeben". Das macht es verwirrend zu sehen, aber letztendlich ist das die Rückkehr, die zählt. In diesem Fall setzen Sie also eine Variable auf diesen Rückgabewert, so dass die Rückgabe niemals zurückgegeben wird. Wenn Ihr Code auf diese Weise formatiert ist, müssen Sie zwei Dinge tun, um ihn zu ändern: Die erste ist, dass die "Return" -Anweisung an der falschen Stelle ist. Die zweite ist, dass die Deklaration für den zurückgegebenen Wert ebenfalls falsch ist. Hier ist der nicht-funktionierenden Code aus dem Beispiel:

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

Hier ist, wie es es geändert, um es zu arbeiten.

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

Dies wird klarer, wenn man das nicht verwenden „dann“, sondern den „Erfolg“ verwenden und „Fehler“ Funktionen. Es wird dann offensichtlich, wo die Rückkehranweisung liegen sollte und wo die zurückgegebene Wertangabe sein sollte. Den Code auf diese Weise zu schreiben und ihn zum Laufen zu bringen, ist, wie ich das Problem herausgefunden habe. HINWEIS, dass Sie den Adresswert in der "then" -Funktion löschen sollten, sonst werden immer mehr Werte angehängt.

Answer 2

In Ihren Diensten sollten Sie Daten in der Callback-Funktion .success() Methode zurückgeben.

Answer 3

Ich hatte auch dieses Problem.

Für mich hatte ich meinen Controller angerufen, der dann mit der API sprach, um meine Daten zu bekommen.

Auch wenn die Daten immer funktionieren (ich in der Lage war, dies mit einem console.log zu sehen) wurde nichts auf der Webseite zur Auswahl angezeigt werden, und ich war die

cannot read property length of undefined 

Fehler.

Schließlich erkannte ich, dass ich meinen Anruf zum Dienst zurückgeben musste.

//controller with code NOT working 
vm.getData = function(val, ep) { 

    myService.getData(val, ep) 
    .then(function(data){ 
    return data 
    }); 
}; 

//service 

this.getData = function(val, ep) { 
    return $http({ 
    //do http call here 
    }) 
    .then(function(data) { 
     //do what's needed with the data here 
     return data 
    }); 
}; 

das Update, das diese Arbeit bekam:

//controller with code WORKING 
vm.getData = function(val, ep) { 

return myService.getData(val, ep) 
    .then(function(data){ 
    return data 
    }); 
}; 

Also noch einmal, ich brauche nur meinen Ruf zum Dienst zurückzukehren und dann als die typeahead gearbeitet erwartet und nicht mehr Fehler!