I've been attempting to utilize a routeparam to filter the results of a REST call, but unfortunately I'm encountering issues and receiving the following error message:
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 specific value I'm trying to retrieve is based on the articlecategoryid. When I test my URL using a browser tool like Postman, it works perfectly fine. An example URL that returns the desired results filtered by articlecategoryid is as follows:
https://myrestcall.net/tables/articles/?$filter=(articlecategoryid eq 1)
However, when implementing this in Angular, it doesn't seem to work and instead throws an error.
Below is a snippet of the sample REST data obtained from this call:
[
{
"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's how my App setup looks like:
var pfcModule = angular.module('pfcModule', [
'ngRoute',
'ui.bootstrap',
'auth0',
'angular-storage',
'angular-jwt',
'pfcServices',
'pfcControllers']);
pfcModule.config([
... (content retained for brevity) ...
}])
.run(function ($rootScope, auth, store, jwtHelper, $location) {
... (content retained for brevity) ...
});
This section details 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' }
}
);
}]);
And here's my controller:
var pfcControllers = angular.module('pfcControllers', ['auth0']);
pfcControllers.controller('pfcCategoriesCtrl', ['$scope', '$routeParams', 'pfcArticleCategories', function ($scope, $routeParams, pfcArticleCategories) {
... (content retained for brevity) ...
}]);
To display the REST data on the page (categories.html), the code would look something like this:
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>
To filter the data based on routeparam, you can use the following links in your page (home.html):
<a href="#categories/1">Article 1 Category</a>
<a href="#categories/2">Article 2 Category</a>
UPDATE: While other REST calls are functional, including those with a routeparam like , the problematic aspect appears to be related to the ?$filter= functionality in the failing call. Are there similar experiences with passing values into a REST call where the variable isn't directly after a / such as in /:articleID?