过滤器 AngularJS REST JSON 数据:错误:badcfg 响应与配置的参数不匹配
Filter AngularJS REST JSON Data: error:badcfg Response does not match configured parameter
我正在尝试使用路由参数来过滤来自 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
我试图获得的值是通过文章类别 id。如果我将我的 URL 放入诸如邮递员之类的浏览器工具中,它可以工作。按 articlecategoryid 返回所需内容的示例 URL 如下所示:
https://myrestcall.net/tables/articles/?$filter=(articlecategoryid eq 1)
但是,在 Angular 中使用它似乎无法解决并产生错误。
下面是此调用中的一些示例 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. "
},
]
这是我的应用程序设置:
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');
}
}
}
});
});
这是我的服务:
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' }
}
);
}]);
这是我的控制器:
var pfcControllers = angular.module('pfcControllers', ['auth0']);
pfcControllers.controller('pfcCategoriesCtrl', ['$scope', '$routeParams', 'pfcArticleCategories', function ($scope, $routeParams, pfcArticleCategories) {
$scope.category = pfcArticleCategories.get({ articlecategoryID: $routeParams.articlecategoryID });
}]);
以下是输出 REST 数据(类别.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>
以下是我如何链接到此页面以按路由参数(主页.html)过滤它:
<a href="#categories/1">Article 1 Category</a>
<a href="#categories/2">Article 2 Category</a>
更新:我的其他 REST 调用正在工作,即使使用诸如 https://myrestcall.net/tables/articles/:articleID 之类的路由参数,所以我专注于失败调用的 ?$filter= 方面。其他人在将值传递到 REST 调用时遇到问题,因为变量不像/:articleID 中那样直接在/之后
在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=} – 如果为 true,则此操作的返回对象是一个数组,请参阅返回部分。
在此处查看文档
解决了!问题出在控制器中,因为我使用的是"Get"。"Get"适用于通过id检索某些内容(例如 https://myrestcall.net/tables/articles/:articleID)。
但是,我需要使用"query"命令,因为它有一个隐式的isArray:true(请参阅Angular Resource Doc,其中指出"query":{method:'GET',isArray:true},)
当我将控制器从:
pfcControllers.controller('pfcCategoriesCtrl', ['$scope', '$routeParams', 'pfcArticleCategories', function ($scope, $routeParams, pfcArticleCategories) {
$scope.category = pfcArticleCategories.get({ articlecategoryID: $routeParams.articlecategoryID });
}]);
自:
pfcControllers.controller('pfcCategoriesCtrl', ['$scope', '$routeParams', 'pfcArticleCategories', function ($scope, $routeParams, pfcArticleCategories) {
$scope.category = pfcArticleCategories.query({ articlecategoryID: $routeParams.articlecategoryID });
}]);
它会根据需要解析。
- 高库存时期时间与时区不匹配
- react路由器使用简单的javascript路由器配置来处理不匹配的路径
- Javascript:图像与单选按钮的值不匹配
- 使用javascript配置文件作为handlebas博客模板,但配置不是't工作正常
- 文本区域(jQuery)的结果不匹配
- 如果状态不匹配,则缩小为丑陋
- 为什么我网页的facebook点赞数与该网页的facebook页面不匹配
- 使用jscodeshift添加表达式时,错误{..}与类型字符串不匹配
- JavaScript正则表达式不匹配
- row.entity.xxxx属性doensn'排序后不匹配
- Url.Content中的Url不匹配
- 控件坐标与组坐标不匹配
- 使用正则表达式查找字符串中的不匹配字符
- CSS Media Query 和 Javascript/jQuery 不匹配
- 始终在 jQuery 自动完成中显示特定选项,即使它与输入不匹配
- 如果项目不匹配,则显示变量
- 正则表达式匹配 JQM 路由器插件中的“项目”但不匹配“项目”
- Lodash 从与值数组不匹配的数组中获取项目
- 比较 2 个数组并得到这些变量不匹配
- 过滤器 AngularJS REST JSON 数据:错误:badcfg 响应与配置的参数不匹配