How to modify the content type in an Angular.js $http.delete request

Question

How to modify the content type in an Angular.js $http.delete request

When making a $http.delete request in my Angular app, I include a config object using the following approach:

return $http.delete('projects/' + projectID + '/activityTypes', {data: [{id: 2}]})

This method attaches the values from my data key to the request body as seen in the image link below:

https://i.stack.imgur.com/ZSzhC.png

However, the default content-type set by Angular is text/plain and I require it to be JSON.

Is there a way to modify the content type of this $http.delete request?

UPDATE: Apologies for sharing an incorrect screenshot showing Response Headers instead of Request Headers. Here is the updated version:

https://i.stack.imgur.com/9Bm5a.png

Many thanks @charlietfl for bringing this to my attention.

javascript ajax angularjs

Answer 1

Answer №1

After conducting some investigation, I discovered that it is possible to include multiple options (such as Content-Type) in the config object that was already being passed. Here's an example of how this can be done:

$http.delete('projects/' + id + '/activityTypes',
    {data: activitiesToDelete, headers: {'Content-Type': 'application/json'}});

This method works perfectly as intended, demonstrating that sending a body with an $http.delete request using Angular is indeed achievable. Additionally, it allows for further customization of the HTTP request through the same config object.

According to Angular's $http documentation:

data – {string|Object} – Data to be sent as the request message data.

headers – {Object} – Map of strings or functions which return strings representing HTTP headers to send to the server. If the return value of a function is null, the header will not be sent. Functions accept a config object as an argument.

Answer 2

After conducting some investigation, I discovered that it is possible to include multiple options (such as Content-Type) in the config object that was already being passed. Here's an example of how this can be done:

$http.delete('projects/' + id + '/activityTypes',
    {data: activitiesToDelete, headers: {'Content-Type': 'application/json'}});

This method works perfectly as intended, demonstrating that sending a body with an $http.delete request using Angular is indeed achievable. Additionally, it allows for further customization of the HTTP request through the same config object.

According to Angular's $http documentation:

data – {string|Object} – Data to be sent as the request message data.

headers – {Object} – Map of strings or functions which return strings representing HTTP headers to send to the server. If the return value of a function is null, the header will not be sent. Functions accept a config object as an argument.

How to modify the content type in an Angular.js $http.delete request

Answer №1

Similar questions

Unpredictable jQuery Ajax setTimeout

Tips for understanding nested JSON or array data structure?

Executing the Javascript function after the dynamic loading of the table through an ajax request

Guide to placing the Drawer component beneath the AppBar in Material-UI

Generating additional react-select dropdowns depending on the selection made in the initial dropdown menu

A guide on retrieving the selected option from a dropdown menu with React Material UI

Implementing a universal timer for tmi.js and discord.js integration

Adding properties with strings as identifiers to classes in TypeScript: A step-by-step guide

What is the process of including a pre-existing product as nested attributes in Rails invoices?

Having issues with Facebook's login API for JavaScript?

Changing images dynamically in tinymce using JavaScript

Basic form submission versus using an Ajax loader mechanism

angular directive for star ratings without any stars filled

Utilize Chrome storage instead of localstorage to generate Parse sessions

The AJAX request and UPDATE query are not working as expected

JavaScript timekeepers and Ajax polling/scheduling

Navigating through an array containing references to object IDs with Mongoose

Creating custom markers with an API in Vue-2-Leaflet

When you use the useState object in NextJS, the context object may appear to be empty

Troubleshooting the Hover Effect of Buttons in Next.js when Using Tailwind CSS for Dynamic Color Changes