【问题标题】：Expected Array but received ...(JSON)... AngularJS Error预期的数组但收到...（JSON）... AngularJS错误
【发布时间】：2017-05-09 23:37:45
【问题描述】：

我正在从 Adam Freeman 的 ,,Pro AngularJS" 书中学习 Angular1。我在构建他在第 6-8 章中描述的 DeployD 应用程序时遇到了问题 - 我的代码似乎不想阅读 JSON

这是我的 HTML：

<!DOCTYPE html>
<html ng-app="sportsStore" lang="pl">
<head>
    <title>SportsStore</title>
    <script src="components/angular.js"></script>
    <script src="components/angular-resource.js"></script>
    <link href="components/bootstrap.css" rel="stylesheet" />
    <link href="components/bootstrap-theme.css" rel="stylesheet" />
    <script>
        angular.module("sportsStore", ["customFilters"]);
    </script>
    <script src="controllers/sportsStore.js"></script>
    <script src="filters/customFilters.js"></script>
    <script src="controllers/productListControllers.js"></script>
</head>
<body ng-controller="sportsStoreCtrl">
<div class="navbar navbar-inverse">
    <a class="navbar-brand" href="#">SKLEP SPORTOWY</a>
</div>
<div class="panel panel-default row" ng-controller="productListCtrl">
    <div class="alert alert-danger" ng-show="data.error">
        Błąd ({{data.error.status}}). Dane produktu nie zostały wczytane.
        <a href="/index.html" class="alert-link">Kliknij tutaj, aby spróbować ponownie</a>
    </div>
    <div class="panel panel-default row" ng-controller="productListCtrl"
         ng-hide="data.error">
    <div class="col-xs-3">
        <a ng-click="selectCategory()"
           class="btn btn-block btn-default btn-lg">Strona główna</a>
        <a ng-repeat="item in data.products | orderBy:'category' |
unique:'category'" ng-click="selectCategory(item)" class=" btn btn-block
btn-default btn-lg" ng-class="getCategoryClass(item)">
            {{item}}
        </a>
    </div>
    <div class="col-xs-8">
        <div class="well"
             ng-repeat="item in data.products | filter:categoryFilterFn |
range:selectedPage:pageSize">
            <h3>
                <strong>{{item.name}}</strong>
                <span class="pull-right label label-primary">
{{item.price | currency}}
</span>
            </h3>
            <span class="lead">{{item.description}}</span>
        </div>
        <div class="pull-right btn-group">
            <a ng-repeat="page in data.products | filter:categoryFilterFn |
                    pageCount:pageSize" ng-click="selectPage($index + 1)" class="btn
btn-default" ng-class="getPageClass($index + 1)">
                {{$index + 1}}
            </a>
        </div>
    </div>
</div>
</body>
</html>

和 sportStore.js 控制器

angular.module("sportsStore")
    .constant("dataUrl", "http://localhost:5500/products")
    .controller("sportsStoreCtrl", function ($scope, $http, dataUrl) {
        $scope.data = {};
        $http.get(dataUrl)
            .then(function (data) {
                $scope.data.products = data;
            },
            function (error) {
                $scope.data.error = error;
            });
    });

我正在使用 DeployD 构建 API，问题是当我尝试运行我的应用程序时，控制台中显示错误：

错误：[filter:notarray] 预期的数组但已收到： {"data":[{"name":"Kajak","description":"Łódka przeznaczona dla jednej osoby","类别":"运动型 Wodne","price":275,"id":"d9b9e4fcb9df3853"},{"name":"Kamizelka ratunkowa","description":"Chroni i dodaje uroku","category":"Sporty wodne","price":49.75,"id":"3c1cceedb44ddb84"},{"name":"Piłka","description":"Zatwierdzona przez FIFA rozmiar i waga","类别":"Piłka Nożna","price":19.5,"id":"447a2079a8488932"},{"name":"Flagi narożne","description":"Nadadzą Twojemu boisku profesjonalny wygląd","类别":"Piłka Nożna","price":34.95,"id":"2b2dd597f18bb8a7"},{"name":"Stadion","description":"Składany 体育场 na 35000 osób","类别":"Piłka Nożna","price":79500,"id":"2cfe0f6767240bf9"},{"name":"Czapka","description":"Zwiększa efektywność mózgu o 75%","category":"Szachy","price":16,"id":"dfc137db43574b4a"},{"name":"Niestabilne krzesło","description":"Zmniejsza szansę przeciwnika","category":"Szachy","price":29,"id":"e2b644c5091d28ca"},{"name":"Ludzka szachownica","description":"Przyjemna gra dla całej rodziny","category":"Szachy","price":75,"id":"f945806bb011895d"},{"name":"Błyszczący król","description":"Pokryty złotem i wysadzany diamentami król","category":"Szachy","price":1200,"id":"fab242704bb38b64"}],"status":200,"config":{"method":"GET","transformRequest": [null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"http://localhost:5500/products","headers":{"Accept":"application/json, 文本/纯文本，/"}},"statusText":"OK"} http://errors.angularjs.org/1.6.0-rc.1/filter/notarray?p0=%7B%22data%22%3A%…son%2C%20text%2Fplain%2C%20*%2F*%22%7D%7D%2C%22statusText%22%3A%22OK%22%7D 在 angular.js:68 在 angular.js:20392 在 fn（编译时的评估（angular.js:15095），：4:388）在 regularInterceptedExpression (angular.js:16203) 在 Scope.$digest (angular.js:17732) 在 Scope.$apply (angular.js:18006) 完成后（angular.js:12150）在 completeRequest (angular.js:12376) 在 XMLHttpRequest.requestLoaded (angular.js:12304)

我试图略过 SO 上的类似错误，但似乎没有一个解决方案适合我。有人有类似的问题吗？

【问题讨论】：

$http 的 then() 中的响应对象不是数据本身...它有一个属性 data 这就是您所需要的

标签： javascript angularjs arrays json node.js

【解决方案1】：

ng repeat 与数组一起使用，但根据then() 方法中从 API 获得的响应不是数据本身，但它有一个名为 data 的属性，这是您必须传递的实际数组在ng-repeat。

所以，不要使用$scope.data.products = data，而是使用$scope.data.products = data.data

`----------OR----------`

.then(function (response) {
  $scope.data.products = response.data;
}

【讨论】：

【解决方案2】：

错误消息显示过滤器拒绝处理响应对象而不是数据数组。 Expected array but received: {data:[..., headers: ...

$http 服务的.then 方法返回一个响应对象，而不是数据。

angular.module("sportsStore")
    .constant("dataUrl", "http://localhost:5500/products")
    .controller("sportsStoreCtrl", function ($scope, $http, dataUrl) {
        $scope.data = {};
        $http.get(dataUrl)
            //.then(function (data) {
            //    $scope.data.products = data;
            .then(function (response) {
                $scope.data.products = response.data;
            },
            function (error) {
                $scope.data.error = error;
            });
    });

数据只是响应对象的一个属性：

$http(...).
  then(function onSuccess(response) {
    // Handle success
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    ...
  }, function onError(response) {
    // Handle error
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    ...
  });

【讨论】：

【解决方案3】：

ng 重复和过滤适用于数组，您需要访问数据

 angular.module("sportsStore")
    .constant("dataUrl", "http://localhost:5500/products")
    .controller("sportsStoreCtrl", function ($scope, $http, dataUrl) {
        $scope.data = {};
        $http.get(dataUrl)
            .then(function (data) {
                $scope.data.products = data.data;
            },
            function (error) {
                $scope.data.error = error;
            });
    });

【讨论】：

【解决方案4】：

Angular 期望数据变量是数组类型。

$scope.data =  [];

然后试试下面的代码：

$http.get('dataUrl')
    .success(function(data) {
        $scope.data = data;
    }).error(function(data, status) {
        $log.error('Error ' + status + ' unable to get data from server.');
});

还记得将$log 添加到您的控制器中以在控制台中正确显示错误：

.controller('sportsStoreCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log)

【讨论】：