Ошибка Angularjs: [filter: notarray] Ожидаемый массив, но полученный: {} с фильтром на ng-repeat

Я пытаюсь заполнить таблицу html, используя запрос angular API, используя директиву ng-repeat. Сначала загружается страница html, затем выполняется запрос на получение данных, заполняющих таблицу при возврате ответа. Когда я добавляю фильтр в директиву ng-repeat, таблица заполняется и функция фильтра работает, однако в моей консоли браузера Chrome я получаю следующую ошибку:

Ошибка: [filter: notarray] Ожидаемый массив, но полученный: {} http://errors.angularjs.org/1.4.3/filter/notarray?p0=%7B%7D   на REGEX_STRING_REGEXP (angular.js: 68)    при angular.js: 18251    в Object.fn(app.js: 185)    в Scope. $get.Scope. $digest (angular.js: 15683)    в поле Scope. $get.Scope. $apply (angular.js: 15951)    в bootstrapApply (angular.js: 1633)    в Object.invoke(angular.js: 4450)    на doBootstrap (angular.js: 1631)    при загрузке (angular.js: 1651)    at angleularInit (angular.js: 1545)

Я установил образец на plunker, ошибка также отображается в консоли здесь, когда образец запускается:

http://plnkr.co/edit/J83gVsk2qZ0nCgKIKynj?

html:

<!DOCTYPE html>
<html>
<head>
  <script data-require="[email protected]*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
  <script data-require="[email protected]*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-route.js"></script>
  <script data-require="[email protected]*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-resource.js"></script>
  <script type="text/javascript" src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet" />
</head>
<body ng-app="inventoryManagerApp">
  <h3>Sample - Expected array error</h3> Filter
  <input type="text" id="quoteListFilter" class="form-control" ng-  model="search" />
  <div ng-controller="QuoteController">
    <table class="table table-bordered">
      <tbody>
        <tr>
          <th>Specification</th>
          <th>Quantity</th>
        </tr>
        <tr ng-repeat="quote in quotes | filter:search">
          <td>{{quote.SpecificationDetails}}</td>
          <td>{{quote.Quantity}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

javascript:

var inventoryManagerApp = angular.module('inventoryManagerApp', [
  'ngResource',
  'quoteControllers'
]);

var quoteControllers = angular.module('quoteControllers', []);

quoteControllers.controller("QuoteController", ['$scope', 'filterFilter', 'quoteRepository',
  function($scope, filterFilter, quoteRepository) {

     $scope.quotes = quoteRepository.getQuoteList().$promise.then(
            function (result) {
                $scope.quotes = result;
            },
            function () {
            }
        );
  }
]);

inventoryManagerApp.factory('quoteRepository',
  function($resource) {
    return {
      getQuoteList: function() {
        return    $resource('http://drbsample.azurewebsites.net/api/Quotes').query();
      }
    };
  });

Кажется, что-то связано с данными, чтобы заполнить директиву ng-repeat, не будучи сразу доступной при загрузке страницы. Когда я заменяю $scope.quotes данными json на загрузку страницы, а не запрашивая данные из API, не получайте ошибку.

Ответы

Ответ 1

Проблема заключается в этом назначении:

$scope.quotes = quoteRepository.getQuoteList().$promise.then(
        function (result) {
            $scope.quotes = result;
        },
        function () {
        }
    );

Функция .then() возвращает другой объект обещания, чтобы разрешить цепочку: .then().then(), и потому что он возвращает объект, из-за которого вы получаете ошибку notarray.

Чтобы избежать ссылочной ошибки, вы можете указать $scope.quotes как пустой аранжировать раньше, а затем присвоить ему результаты.

$scope.quotes = [];
quoteRepository.getQuoteList().$promise.then(
        function (result) {
            $scope.quotes = result;
        },
        function () {
        }
    );

Ответ 2

$scope.quotes = quoteRepository.getQuoteList().$promise.then(

назначение бесполезно. просто удалите $scope.quotes = из строки, чтобы решить вашу проблему.

prom.then возвращает объект, который бесполезен для оператора repeat.

Ответ 3

Методы обещания $http legacy.success и .error устарели и будут удалены в Angular v1.6.0. Вместо этого используйте стандартный .then.

Теперь. then метод возвращает объект с несколькими элементами: данными, статусом и т.д. Поэтому вам нужно использовать response.data, а не просто ответ:

$http.get('https://example.org/...')
  .then(function (response) {

    console.log(response);

    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;

    console.log(data);

});

Ответ 4

quoteRepository.getQuoteList().then(
    function (result) {
        $scope.quotes = result;
    },
    function () {
    }
);