[英]Filter AngularJS REST JSON Data: error:badcfg Response does not match configured parameter
I am trying to use a routeparam to filter the results from a REST call, but am not getting any results returned but rather receiving the following error: 我正在尝试使用routeparam来过滤来自REST调用的结果,但没有得到任何返回的结果,而是收到以下错误:
Error: error:badcfg Response does not match configured parameter
Error in resource configuration for action `get`. Expected response to contain an object but got an array
The value I am attempting to get is by the articlecategoryid. 我试图获得的值是由articlecategoryid提供的。 If I drop my URL into a browser tool such as Postman it works.
如果我将URL放到诸如Postman之类的浏览器工具中,它将起作用。 An example URL that returns as desired by articlecategoryid is as follows:
根据articlecategoryid期望返回的示例URL如下:
https://myrestcall.net/tables/articles/?$filter=(articlecategoryid eq 1)
However, using this in Angular does not seem to resolve and produces the error. 但是,在Angular中使用它似乎无法解决并产生错误。
Here is some sample REST Data from this call: 这是此调用中的一些示例REST数据:
[
{
"id": "66D5069C-DC67-46FC-8A51-1F15A94216D4",
"articletitle": "artilce1",
"articlecategoryid": 1,
"articlesummary": "article 1 summary. "
},
{
"id": "66D5069C-DC67-46FC-8A51-1F15A94216D5",
"articletitle": "artilce2",
"articlecategoryid": 1,
"articlesummary": "article 2 summary. "
},
{
"id": "66D5069C-DC67-46FC-8A51-1F15A94216D6",
"articletitle": "artilce3",
"articlecategoryid": 1,
"articlesummary": "article 3 summary. "
},
]
Here is my App setup: 这是我的应用设置:
var pfcModule = angular.module('pfcModule', [
'ngRoute',
'ui.bootstrap',
'auth0',
'angular-storage',
'angular-jwt',
'pfcServices',
'pfcControllers']);
pfcModule.config([
'$routeProvider',
'authProvider',
'$httpProvider',
'$locationProvider',
'jwtInterceptorProvider',
function ($routeProvider, authProvider, $httpProvider, $locationProvider, jwtInterceptorProvider) {
$routeProvider.
when('/home', { templateUrl: './views/home.html' }).
when('/categories/:articlecategoryID', { templateUrl: './views/categories.html', controller: 'pfcCategoriesCtrl' }).
when('/article/:articleID/:articleTitle', { templateUrl: './views/article.html', controller: 'pfcCtrl2' }).
when('/add-article', { templateUrl: './views/add-article.html', controller: 'pfcPost', requiresLogin: true }).
when('/login', { templateUrl: './views/login.html', controller: 'loginCtrl' }).
otherwise({ redirectTo: '/home' });
$httpProvider.defaults.headers.common['X-ZUMO-APPLICATION'] = 'myid';
$httpProvider.defaults.headers.common['Content-Type'] = 'Application/json';
authProvider.init({
domain: 'mydomain',
clientID: 'myid',
callbackURL: location.href,
loginUrl: '/login'
});
jwtInterceptorProvider.tokenGetter = function (store) {
return store.get('token');
}
$httpProvider.interceptors.push('jwtInterceptor');
}])
.run(function ($rootScope, auth, store, jwtHelper, $location) {
$rootScope.$on('$locationChangeStart', function () {
if (!auth.isAuthenticated) {
var token = store.get('token');
if (token) {
if (!jwtHelper.isTokenExpired(token)) {
auth.authenticate(store.get('profile'), token);
} else {
$location.path('/login');
}
}
}
});
});
Here is my service: 这是我的服务:
var pfcServices = angular.module('pfcServices', ['ngResource'])
pfcServices.factory('pfcArticleCategories', ['$resource', function ($resource) {
return $resource('https://myrestcall.net/tables/articles/?$filter=(articlecategoryid eq :articlecategoryID)', { articlecategoryID: '@articlecategoryid' },
{
'update': { method: 'PATCH' }
}
);
}]);
Here is my controller: 这是我的控制器:
var pfcControllers = angular.module('pfcControllers', ['auth0']);
pfcControllers.controller('pfcCategoriesCtrl', ['$scope', '$routeParams', 'pfcArticleCategories', function ($scope, $routeParams, pfcArticleCategories) {
$scope.category = pfcArticleCategories.get({ articlecategoryID: $routeParams.articlecategoryID });
}]);
Here is the page that would output the REST data (categories.html): 这是将输出REST数据的页面(categories.html):
div class="row">
<div class="col-md-4">
<h2>Heading</h2>
Sort By: <select ng-model="articleSortOrder">
<option value="+id">ID</option>
<option value="+articletitle">Article Title</option>
<option value="+articlecategoryid">Article Category</option>
</select>
<table class="table table-striped">
<tr>
<th>ID</th>
<th>Title</th>
<th>Category ID</th>
</tr>
<tr ng-repeat="articles in category | orderBy:articleSortOrder">
<td>{{articles.id}}</td>
<td>{{articles.articletitle}}</td>
<td>{{articles.articlecategoryid}}</td>
</tr>
</table>
</div>
Here is how I link into this page to filter it by the routeparam (home.html): 这是我链接到此页面以按routeparam(home.html)进行过滤的方法:
<a href="#categories/1">Article 1 Category</a>
<a href="#categories/2">Article 2 Category</a>
UPDATE: My other REST calls are working, even with a routeparam such as https://myrestcall.net/tables/articles/:articleID so I am focusing on the ?$filter= aspect of the failing call. 更新:即使使用诸如https://myrestcall.net/tables/articles/:articleID之类的routeparam,我的其他REST调用也可以正常工作,因此我将重点放在失败调用的?$ filter =方面。 Have others had issues with passing values into a REST call, as the variable is not directly after a / as it is in /:articleID
是否让其他人在将值传递到REST调用时遇到问题,因为变量不是直接在/之后,如在/:articleID中一样
In your pfcServices
factory definition add isArray:true
to 'update': { method: 'PATCH' }
, every time you get a JSON array as a result you need to add isArray: true
to method definition. 在
pfcServices
工厂定义中,将isArray:true
添加到'update': { method: 'PATCH' }
,因此,每次获取JSON数组时,都需要在方法定义中添加isArray: true
。
var pfcServices = angular.module('pfcServices', ['ngResource'])
pfcServices.factory('pfcArticleCategories', ['$resource', function ($resource) {
return $resource('https://myrestcall.net/tables/articles/?$filter=(articlecategoryid eq :articlecategoryID)', { articlecategoryID: '@articlecategoryid' },
{
'update': { method: 'PATCH', isArray:true }
}
);
}]);
isArray
– {boolean=} – If true then the returned object for this action is an array, see returns section. isArray
– {boolean =} –如果为true,则此操作返回的对象是数组,请参见returns部分。
Solved it! 解决了! The issue is in the controller as I was using a 'Get'.
问题出在控制器中,就像我在使用“获取”一样。 A 'Get' works fine for retrieving something by the id (ex. https://myrestcall.net/tables/articles/:articleID ).
通过ID(例如https://myrestcall.net/tables/articles/:articleID )检索内容时,“获取”效果很好。
However, I needed to use the 'query' command as this has an implicit isArray:true (please see the Angular Resource Doc where it states 'query': {method:'GET', isArray:true},) 但是,我需要使用“查询”命令,因为它具有隐式的isArray:true(请参阅Angular Resource Doc ,其中声明了“ query”:{method:'GET',isArray:true},)
When I changed my controller from: 当我从以下位置更改控制器时:
pfcControllers.controller('pfcCategoriesCtrl', ['$scope', '$routeParams', 'pfcArticleCategories', function ($scope, $routeParams, pfcArticleCategories) {
$scope.category = pfcArticleCategories.get({ articlecategoryID: $routeParams.articlecategoryID });
}]);
To: 至:
pfcControllers.controller('pfcCategoriesCtrl', ['$scope', '$routeParams', 'pfcArticleCategories', function ($scope, $routeParams, pfcArticleCategories) {
$scope.category = pfcArticleCategories.query({ articlecategoryID: $routeParams.articlecategoryID });
}]);
It resolves as desired. 它根据需要解决。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.