AngularJS $resource DELETE item in collection

Question

I have an ASP.NET Web Api (1) controller with GET, POST and DELETE actions. I am calling this from an Angular 1.2.0 RC3 app with $resource. Let's call the controller Foos.

I do a GET that returns a list of foos:

GET http://localhost:55386/api/foos/123456/1 HTTP/1.1
Host: localhost:55386
Connection: keep-alive
Accept: application/json, text/plain, */*
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8,es;q=0.6

where the resource is

/api/foos/clientId/recordId

Here I am saying get me a list of foos for client x and record y

Now, I want to remove a single foo from the list of foos that I received, so I call $delete:

$scope.delete = function(foo){
    foo.$delete();
}

however this results in the following request:

DELETE http://localhost:55386/api/foos/123456/1 HTTP/1.1
Host: localhost:55386
Connection: keep-alive
Accept: application/json, text/plain, */*
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8,es;q=0.6

This delete is obviously trying to delete the entire list of foos, which makes sence.

My question is, how do I delete a single foo using Angular's $resource without getting each foo in its own GET request?

UPDATE:

I could do a GET /api/foo/1 where the resource is foo/fooId, and its equivalent DELETE /api/foo/1 to delete it but I want to get a list of foos instead of each foo individually.

localhost:55386/api/foos/123456/1 is not clientid=123456 and recordid=1 ? — sylwester
– sylwester, Commented Nov 4, 2014 at 10:44
My question is, with $resource, how do I delete a single foo using Angular's $resource without getting each foo in its own GET request? I've updated the question. — Sam Leach
– Sam Leach, Commented Nov 4, 2014 at 10:50

I. YOCK · Accepted Answer · 2014-11-04 10:53:06Z

1

I know that is not the question but you should restangular https://github.com/mgonto/restangular. It is easier to interact with rest services

answered Nov 4, 2014 at 10:53

I. YOCK

3151 gold badge3 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Leach Over a year ago

Thaks, I'll check it out.

Sam Leach · Accepted Answer · 2014-11-06 17:06:43Z

0

I was misunderstanding how $resource works. I assumed thatfoo knew how to delete itself as it is a Resource 'instance' in the following function:

$scope.delete = function(foo){
    foo.$delete();
}

The correct approach is:

$scope.delete = function(foo){
    Api.delete({ 
        id: foo.Id, 
        clientId : $scope.clientId, 
        recordId : $scope.recordId 
    });
}

You have to manually tell the $resource instance to use the id of foo so that the url includes the foo id and does the following DELETE

DELETE http://localhost:55386/api/foos/123456/1/123 HTTP/1.1

where 123 is fooId

edited Nov 6, 2014 at 17:06

answered Nov 6, 2014 at 15:41

Sam Leach

13k10 gold badges49 silver badges73 bronze badges

Collectives™ on Stack Overflow

AngularJS $resource DELETE item in collection

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related