AngularUI-Bootstrap Typeahead не может прочитать `length` Свойство` undefined `

Я получаю следующую ошибку, когда пытаюсь получить значения typeahead из AngularUI-Bootstrap, используя обещание.

TypeError: Cannot read property 'length' of undefined
  at http://localhost:8000/static/js/ui-bootstrap-tpls-0.6.0.min.js:1:37982
  at i (http://localhost:8000/static/js/angular.min.js:79:437)
  at i (http://localhost:8000/static/js/angular.min.js:79:437)
  at http://localhost:8000/static/js/angular.min.js:80:485
  at Object.e.$eval (http://localhost:8000/static/js/angular.min.js:92:272)
  at Object.e.$digest (http://localhost:8000/static/js/angular.min.js:90:142)
  at Object.e.$apply (http://localhost:8000/static/js/angular.min.js:92:431)
  at HTMLInputElement.Va.i (http://localhost:8000/static/js/angular.min.js:120:156)
  at HTMLInputElement.x.event.dispatch (http://localhost:8000/static/js/jquery-1.10.2.min.js:5:14129)
  at HTMLInputElement.v.handle (http://localhost:8000/static/js/jquery-1.10.2.min.js:5:10866)

Мой тег HTML:

<input type="text" class="form-control" id="guestName" ng-model="name" typeahead="name for name in getTypeaheadValues($viewValue)">

С помощью моей функции getTypeaheadValues выполните следующие действия:

$scope.getTypeaheadValues = function($viewValue)
{
    // return ['1','2','3','4'];

    $http({
        method: 'GET',
        url: 'api/v1/person?name__icontains=' + $viewValue
    }).error(function ($data) {
        console.log("failed to fetch typeahead data");
    }).success(function ($data) {
        var output = [];
        $data.objects.forEach(function (person)
        {
            output.push(person.name);
        });
        console.log(output);
        return output;
    });
}

Я не понимаю, что AngularUI-Bootstrap жалуется как undefined. Если я удалю комментарий на самый верхний return, значения будут отображаться в порядке. Вывод console.log в success также возвращает все значения, которые я ожидаю в массиве.

Что мне не хватает, что заставит AngularUI-Bootstrap не увидеть возвращенный массив?

Ответы

Ответ 1

Эта проблема была в два раза.

Во-первых, я не возвращал событие обещания (вызов $http). Отсутствие оператора return (как указывает @tobo) - это то, что вызывало ошибку напрямую. Мне нужно было вернуть обещание, но не массив.

Во-вторых, мне нужно использовать .then вместо .success для AngularUI-Bootstrap для получения результатов.

Я столкнулся с следующим вопросом: Как связать angular с именем -ui с сервером через $http для оптимизации на стороне сервера?

Какой обновил мой вызов функции ниже:

$scope.getTypeaheadValues = function($viewValue)
{
    return $http({
        method: 'GET',
        url: 'api/v1/person?name__icontains=' + $viewValue
    }).then(function ($response) {
        var output = [];

        console.log($data);

        $response.data.objects.forEach(function (person)
        {
            output.push(person.name);
        });

        console.log(output);
        return output;
    });
}

Ответ 2

$scope.getTypeaheadValues ​​не возвращает какой-либо массив. Он возвращает null, потому что ваш оператор возврата находится в функции обратного вызова "success", которая называется асинхронной.

Возможно, это сработает:

$scope.getTypeaheadValues = function($viewValue)
{    
    var output = [];
    $http({
        method: 'GET',
        url: 'api/v1/person?name__icontains=' + $viewValue
    }).error(function ($data) {
        console.log("failed to fetch typeahead data");
    }).success(function ($data) {            
        $data.objects.forEach(function (person)
        {
            output.push(person.name);
        });
        console.log(output);        
    });
    return output;
}

Ответ 3

$scope.getTypeaheadValues = function($viewValue)
{
    var someOutput="";//return something

    $http({
        method: 'GET',
        url: 'api/v1/person?name__icontains=' + $viewValue
    }).error(function (data) {
        console.error(data);
    }).success(function (data) {
        console.log(data);//Do whatever you want 
    });
return someOutput;

}

//Отсутствует оператор return