Javascript Angularjs 错误：[filter:notarray] 预期的数组，但收到了：{}，在 ng-repeat 上有一个过滤器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32214990/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs Error: [filter:notarray] Expected array but received: {} with a filter on an ng-repeat
提问by stonefree
I am attempting to populate an html table using an angular request to an API using the ng-repeat directive. The html page loads first then the request is made to get the data which fills the table when the response is returned. When I add a filter to the ng-repeat directive the table is populated and the filter functions, however in my chrome browser console I get the following error:
我正在尝试使用 ng-repeat 指令使用对 API 的角度请求来填充 html 表。首先加载 html 页面，然后请求在返回响应时获取填充表的数据。当我向 ng-repeat 指令添加过滤器时，表格被填充并且过滤器功能，但是在我的 chrome 浏览器控制台中，我收到以下错误：
Error: [filter:notarray] Expected array but received: {} http://errors.angularjs.org/1.4.3/filter/notarray?p0=%7B%7Dat REGEX_STRING_REGEXP (angular.js:68) at angular.js:18251 at Object.fn (app.js:185) at Scope.$get.Scope.$digest (angular.js:15683) at Scope.$get.Scope.$apply (angular.js:15951) at bootstrapApply (angular.js:1633) at Object.invoke (angular.js:4450) at doBootstrap (angular.js:1631) at bootstrap (angular.js:1651) at angularInit (angular.js:1545)
错误：[filter:notarray] 预期数组但收到：{} http://errors.angularjs.org/1.4.3/filter/notarray?p0=%7B%7Dat REGEX_STRING_REGEXP (angular.js:68) at angular。 js:18251 at Object.fn (app.js:185) at Scope.$get.Scope.$digest (angular.js:15683) at Scope.$get.Scope.$apply (angular.js:15951) at bootstrapApply (angular.js:1633) at Object.invoke (angular.js:4450) at doBootstrap (angular.js:1631) at bootstrap (angular.js:1651) at angularInit (angular.js:1545)
I have set a sample up on plunker, the error is also displayed in the console here when the sample is run:
我已经在 plunker 上设置了一个示例，当示例运行时，错误也显示在此处的控制台中：
http://plnkr.co/edit/J83gVsk2qZ0nCgKIKynj?
http://plnkr.co/edit/J83gVsk2qZ0nCgKIKynj？
The html:
html：
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="angular-route@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-route.js"></script>
<script data-require="angular-resource@*" 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>
The javascript:
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();
}
};
});
It seems to be something to do with the data to fill the ng-repeat directive not being immediately available on page load. When I replace the $scope.quotes with the json data on page load instead of requesting data from the API do not get the error.
这似乎与填充 ng-repeat 指令的数据在页面加载时不立即可用有关。当我在页面加载时将 $scope.quotes 替换为 json 数据而不是从 API 请求数据时，不会收到错误消息。
回答by Mateusz Kmiecik
The problem is with this assignment:
问题在于这个任务：
$scope.quotes = quoteRepository.getQuoteList().$promise.then(
function (result) {
$scope.quotes = result;
},
function () {
}
);
Function .then()returns another promise object to allow chaining: .then().then(), and because it returns an object that's why your receive notarrayerror.
函数.then()返回另一个 promise 对象以允许链接：.then().then()，并且因为它返回一个对象，这就是您接收notarray错误的原因。
To avoid reference error you can specify $scope.quotesas empty arrray earlier, then assign results to it.
为避免引用错误，您可以$scope.quotes提前指定为空数组，然后将结果分配给它。
$scope.quotes = [];
quoteRepository.getQuoteList().$promise.then(
function (result) {
$scope.quotes = result;
},
function () {
}
);
回答by ibrahimbayer
$scope.quotes = quoteRepository.getQuoteList().$promise.then(
the assignment is useless. just delete the $scope.quotes =from the line has to solve your problem.
任务没用。只需$scope.quotes =从行中删除即可解决您的问题。
promise.then is returning an object which is useless for repeat statement.
promise.then 正在返回一个对重复语句无用的对象。
回答by Roman
The $http legacy promise methods .success and .error have been deprecated and will be removed in Angular v1.6.0. Use the standard .then method instead.
$http 遗留承诺方法 .success 和 .error 已被弃用，并将在 Angular v1.6.0 中删除。请改用标准的 .then 方法。
Now .then method returns object with several elements: data, status, etc. So you need to use response.data instead of just response:
现在 .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);
});
回答by Rafael Francisco
quoteRepository.getQuoteList().then(
function (result) {
$scope.quotes = result;
},
function () {
}
);
