How to send data with angularjs $http.delete() request?

JavascriptAngularjsLaravel 4

Javascript Problem Overview


I have a resource 'roles' which has a many to many relationship with 'user'. To administer 'roles' I need to send the role id and the user id to the server so that it removes the the role from the correct user (not necessarily the logged in user)

Here is what I was attempting but according to the docs this is not possible. I know I can send the two ids in the uri but my laravel backend automatically sets up a resourceful route of resource/{resourceid} which I would like to use if possible. Is there a way to do this that I am missing?

var removeRole = function (roleid, userid) {
        var input =[];
        input.user = userid;

        $http.delete('/roles/' + roleid, input).success(function (data, status) {
            console.log(data);
        });
    };

Javascript Solutions


Solution 1 - Javascript

You can do an http DELETE via a URL like /users/1/roles/2. That would be the most RESTful way to do it.

Otherwise I guess you can just pass the user id as part of the query params? Something like

$http.delete('/roles/' + roleid, {params: {userId: userID}}).then...

Solution 2 - Javascript

My suggestion:

$http({
    method: 'DELETE',
    url: '/roles/' + roleid,
    data: {
        user: userId
    },
    headers: {
    	'Content-type': 'application/json;charset=utf-8'
    }
})
.then(function(response) {
    console.log(response.data);
}, function(rejection) {
    console.log(rejection.data);
});

Solution 3 - Javascript

$http.delete method doesn't accept request body. You can try this workaround :

$http( angular.merge({}, config || {}, {
    method  : 'delete',
    url     : _url,
    data    : _data
}));

where in config you can pass config data like headers etc.

Solution 4 - Javascript

A many to many relationship normally has a linking table. Consider this "link" as an entity in its own right and give it a unique id, then send that id in the delete request.

You would have a a REST resource URL like /user/role to handle operations on a user-role "link" entity.

Solution 5 - Javascript

I would suggest reading this url http://docs.angularjs.org/api/ngResource/service/$resource

and revaluate how you are calling your delete method of your resources.

ideally you would want to be calling the delete of the resource item itself and by not passing the id of the resource into a catch all delete method

however $http.delete accepts a config object that contains both url and data properties you could either craft the query string there or pass an object/string into the data

maybe something along these lines

$http.delete('/roles/'+roleid, {data: input});

Solution 6 - Javascript

Please Try to pass parameters in httpoptions, you can follow function below

deleteAction(url, data) {
    const authToken = sessionStorage.getItem('authtoken');
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        Authorization: 'Bearer ' + authToken,
      }),
      body: data,
    };
    return this.client.delete(url, options);
  }

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMarkView Question on Stackoverflow
Solution 1 - Javascriptsmbergin79View Answer on Stackoverflow
Solution 2 - JavascripteldesView Answer on Stackoverflow
Solution 3 - JavascriptJignesh ThummarView Answer on Stackoverflow
Solution 4 - JavascriptGeoff GenzView Answer on Stackoverflow
Solution 5 - JavascriptNathaniel CurrierView Answer on Stackoverflow
Solution 6 - JavascriptRajView Answer on Stackoverflow