TypeError: undefined is not a function in Angular Resource
Solution 1
I found the answer:
A resource is supposed to represent the matched data object for the rest of its lifespan. If you want to fetch new data you should do so with a new object.
$scope.copies = ContentPage.copies()
Solution 2
The answer from Guido is correct but I didn't get it at the first time.
If you add a custom method to your Angular $resource
and using isArray: true
and expecting to get an Array of something from your WebService you probably want to store the response in an Array.
Therefore you shouldn't use the instance method like this:
var ap = new Ansprechpartner();
$scope.nameDuplicates = ap.$searchByName(...);
But use the resource directly:
$scope.nameDuplicates = Ansprechpartner.searchByName(...)
Using following Angular resource:
mod.factory('Ansprechpartner', ['$resource',
function ($resource) {
return $resource('/api/Ansprechpartner/:id',
{ id: '@ID' },
{
"update": { method: "PUT" },
"searchByName": { method: "GET", url: "/api/Ansprechpartner/searchByName/:name", isArray: true }
}
);
}
]);
Guido Bouman
Updated on June 10, 2022Comments
-
Guido Bouman about 2 years
When trying to poll a custom method
copies
on an AngularJS Resource I get the following error atangular.js:10033
: (The methodcopy
works just fine.)TypeError: undefined is not a function at https://code.angularjs.org/1.3.0-beta.8/angular-resource.min.js:9:347 at Array.forEach (native) at q (https://code.angularjs.org/1.3.0-beta.8/angular.min.js:7:280) at q.then.p.$resolved (https://code.angularjs.org/1.3.0-beta.8/angular-resource.min.js:9:329) at J (https://code.angularjs.org/1.3.0-beta.8/angular.min.js:101:5) at J (https://code.angularjs.org/1.3.0-beta.8/angular.min.js:101:5) at https://code.angularjs.org/1.3.0-beta.8/angular.min.js:102:173 at g.$eval (https://code.angularjs.org/1.3.0-beta.8/angular.min.js:113:138) at g.$digest (https://code.angularjs.org/1.3.0-beta.8/angular.min.js:110:215) at g.$apply (https://code.angularjs.org/1.3.0-beta.8/angular.min.js:113:468)
Angular.js 10016 - 10035:
function consoleLog(type) { var console = $window.console || {}, logFn = console[type] || console.log || noop, hasApply = false; // Note: reading logFn.apply throws an error in IE11 in IE8 document mode. // The reason behind this is that console.log has type "object" in IE8... try { hasApply = !!logFn.apply; } catch (e) {} if (hasApply) { return function() { var args = []; forEach(arguments, function(arg) { args.push(formatError(arg)); }); return logFn.apply(console, args); // This is line 10033 where the error gets thrown. }; }
Simplified resource:
angular.module('vgm.content-pages') .factory('ContentPage', function($resource, $http) { return $resource('/api/content-page/:id', { id:'@page.id' }, { copy: { method: 'POST', url: '/api/content-page/copy/:id' }, copies: { method: 'GET', isArray: true, url: '/api/content-page/copies/:id' } }); });
Simplified directive where I'm getting the error:
angular.module('vgm.genericForms') .directive('vgmFormCopyPicker', function() { return { restrict: 'E', replace: true, templateUrl: '/static/common/generic-forms/widgets/view-copy-picker.html', scope: { resource: '=', }, controller: function($scope, $element) { $scope.pages = []; $scope.loadCopies = function() { $scope.resource.$copies() .then(function(response) { $scope.pages = response.data; }); }; } }; });
As soon as I run the
loadCopies
method, executing the line$scope.resource.$copies()
throws the error above.In the Chrome Inspector I see the call to my API is actually being done. But resolving the promise seems to throw some error...
How can I solve this error?
EDIT:
$scope.resource = ContentPage.get({id: $stateParams.id}).$promise $scope.resource.$save() // Works $scope.resource.$update() // Works $scope.resource.$copy() // Works $scope.resource.$copies() // Does not work!
Angular Resource is trying to overwrite my initial resource with an array of items. But the instance of Resource does not have a method
push
of course.