预期数组，但收到…（JSON）… AngularJS错误
我正在从Adam Freeman的“Pro AngularJS”一书中学习Angular1，在第6-8章中介绍了构buildDeployD应用程序的问题 – 好像我的代码不想读取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来构build一个API，问题是当我尝试运行我的应用程序时，错误显示在控制台中：
错误：[filter：notarray]预期的数组，但收到：{“数据”：[{“名称”：“Kajak”，“描述”：“Łódkaprzeznaczona dla jednej osoby”，“category”：“Sporty Wodne” “：275，”id“：”d9b9e4fcb9df3853“}，{”name“：”Kamizelka ratunkowa“，”description“：”Chroni i dodaje uroku“，”category“：”Sporty wodne“，”price“：49.75， “”：“3c1cceedb44ddb84”}，{“name”：“Piłka”，“description”：“Zatwierdzona przez FIFA rozmiar i waga”，“category”：“PiłkaNożna”，“price”：19.5，“id” 447a2079a8488932“}，{”name“：”Flaginarożne“，”description“：”NadadząTwojemu boisku profesjonalnywygląd“，”category“：”PiłkaNożna“，”price“：34.95，”id“：”2b2dd597f18bb8a7“ {“name”：“Stadion”，“description”：“Składanystadion na 35000osób”，“category”：“PiłkaNożna”，“price”：79500，“id”：“2cfe0f6767240bf9”}，{“name” “Czapka”，“description”：“Zwiększaefektywnośćmózguo 75％”，“category”：“Szachy”，“price”：16，“id”：“dfc137db43574b4a”}，{“name”：“Niestabilnekrzesło”， “description”：“Zmniejszaszansęprzeciwnika”，“category”：“Szachy”，“price”：29，“id”：“e2b644c5 描述“：”Przyjemna gra dlacałejrodziny“，”category“：”Szachy“，”price“：75，”id“：”f945806bb011895d“}，{{ “name”：“Błyszczącykról”，“description”：“Pokrytyzłotemi wysadzany diamentamikró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，text / plain， / “}}，”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 at angular.js：68 at angular.js：20392 at fn（eval at compile（angular.js：15095），：4：388）at regularInterceptedExpression（angular.js：16203）at Scope。$ digest （angular.js：17732）在完成请求（angular.js：12376）在XMLHttpRequest.requestLoaded（angu lar.js：12304）
我试图通过类似的错误，但没有任何解决scheme似乎为我工作。 有人有类似的问题吗？
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; }
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; }); });
Angular期望数据variables是数组types。
$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)
错误消息显示filter拒绝处理响应对象而不是数据数组。 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; ... });