Is it possible to remove an element from a data structure in a web application using an HTTP command?

Apologies for the confusing title, I struggled to find a better way to describe it.

Imagine sending a GET request to an API and receiving this data:

{
    {id: 1, name: "John Doe", tags: ["Apple", "Orange", "Pear"]},
    {id: 2, name: "Jane Doe", tags: ["Grape", "Banana", "Strawberry"]},
    {id: 3, name: "James Smith", tags:["Grapefruit", "Lemon", "Apricot"]}
}

If I wanted to delete the entire second object, I could use a similar approach as follows:

var request = new XMLHttpRequest();
request.open('DELETE', APIurl + "/2", true);
request.send();

However, if I only want to remove the "Banana" tag from the second object, what would be the most efficient method? One option might involve deleting the object entirely and then adding it back without the specific tag, but I wonder if there's a simpler solution available?

As someone with limited experience in working with APIs, I seem unable to solve this matter using online resources. Any help would be greatly appreciated. Thank you!

Answer №1

Using the PUT method request is essential for this task, as it provides a clear way to achieve it

var newData = {};
newData.categories = ["Apple", "Banana"];
var jsonData = JSON.stringify(newData);

request.open("PUT", APIurl+'/2', true);
request.setRequestHeader('Content-type','application/json; charset=utf-8');
request.onload = function () {
    var response = JSON.parse(request.responseText);
    if (request.readyState == 4 && request.status == "200") {
       console.table(response);
   } else {
       console.error(response);
   }
}
request.send(jsonData);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What role does @next/react-dev-overlay serve in development processes?

Currently, I am diving into a NextJs project. Within the next.config.js file, there is this code snippet: const withTM = require('next-transpile-modules')([ 'some package', 'some package', 'emittery', ...

What is the best approach for inserting multiple files into MongoDB with just one JavaScript, Node JS, Shell Script, or mongofile CLI script?

Looking for a way to transfer HTML files from a directory to MongoDB using pure JavaScript, NodeJs, shell script, or mongofile CLI. Any assistance would be greatly appreciated. Thank you in advance. ...

Enhance the performance of React code by refactoring it

Having recently started coding in React for a new organization, I find that the code in my component has grown lengthy and the submithandler method is causing multiple array iterations. Is there a way to refactor the code for better performance? The data t ...

Removing the empty option in a select dropdown

I am facing an issue with the code below: <select id="basicInput" ng-model="MyCtrl.value"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3"& ...

Tips for submitting a form using javascript while preventing the default action

Looking for a way to submit a form in Javascript and prevent the default action? Let's explore how you can achieve this. Initially, my HTML form with the ID "contact_form" had an input element like so: <input id="contact_send_msg" type="submit" val ...

Python code to retrieve data from XHR response on a webpage

My goal is to extract specific data from a website called BarChart, specifically from this URL: . Usually, I can easily extract data using the xpath method on normal HTML pages. However, I've noticed that this website retrieves its data from a networ ...

Slow rendering occurs with unthrottled range input, even with proper throttling applied

I'm currently seeking some general guidelines because I'm unsure where to turn for help at the moment. The issue I am facing involves an uncontrolled input[type=range] slider that performs very slowly when there are numerous steps (works fine wi ...

Field cannot be submitted without the required input after an Ajax request

I want to ensure that all my text/email input forms require a submission before you can "Submit" the email. Unfortunately, when using Ajax to prevent the page from refreshing after pressing the button, the required attribute does not function properly. T ...

Tips for incorporating a set offset while utilizing the scrollTop() function

I have successfully implemented a code that sets a position:fixed to a div when it scrolls past the top of the screen. The code I used is as follows: var $window = $(window), $stickyEl = $('#the-sticky-div'), elTop = $stickyEl.o ...

Unable to access property value following AJAX call

Here is my code snippet: constructor(props: any) { super(props); this.state = { list: [], }; } public componentWillMount() { this.loadData(); } public loadData = () => { axios.get(someURL) .then((response) = ...

What is the process for dynamically altering the source file of VueRouter?

Hello, I am working on a project that involves multiple roles using VueJs and Laravel. Laravel is used as the back-end while Vuejs serves as the front-end. The project has three different roles: User, Modirator, and Editor. Here is a snippet of my code ...

Utilize jQuery to broadcast messages containing textarea content to all users from the database via email

Currently, I am facing an issue while trying to send an email to all users from the database using the value from a textarea. It seems like there is an error in my approach. Upon further inspection, I suspect that the problem lies in selecting the data fro ...

Is it Possible to Achieve Callbacks From AJAX to PHP Despite the Inability to Serialize Closures?

Question How can I incorporate a PHP callback passed via AJAX, where the callback is executed by the page requested through AJAX? The Scenario Comments are submitted through AJAX with parameters serialized and encrypted for security. The issue arises wh ...

I'm curious to know which option - Ajax or Non-Ajax - will improve the speed and functionality of my website

I am considering the best approach to displaying the results of a database query in a table on my website. The query could potentially return up to 1000 rows with 10 columns each, although I anticipate that filter selections will reduce this number. My di ...

What could be causing the JSON String decode error to occur while utilizing extjs ajax?

Here is an example of my code: Ext.Ajax.request({ url:'test.jsp', params:{id:id,password:password}, success:function(response){ console.log(response); var results = Ext.util.J ...

What is the best way to export multiple modules/namespaces with the same name from various files in typescript within index.d.ts?

I am currently in the process of creating a new npm package. I have two TypeScript files, each containing namespaces and modules with the same name 'X'. At the end of each file, I declared the following: export default X; My goal is to import bo ...

Can someone tell me what comes after my nextElementSibling in this specific scenario?

I am puzzled by the usage of nextElementSibling in this code. Can someone provide an explanation on what exactly it is and where it should be used? Thank you in advance! Also, my code seems to be malfunctioning as I keep receiving an error message that s ...

Having trouble sending the code through post message

I was trying to send some code to a node application using Postman with a POST message. In the body, I included the following code: module.exports = function() { var express = require('express'), app = express(); app.set('po ...

Locate the class ID and refine the search results by another class

I am currently working on a task that involves extracting the first <li> element's id where it has the class name my_class, and checking if the <span> with the class Time contains a ":" using jquery. Below is the sample HTML structure: & ...

Activate the download upon clicking in Angular 2

One situation is the following where an icon has a click event <md-list-item *ngFor="let history of exportHistory"> <md-icon (click)="onDownloadClick(history)" md-list-avatar>file_download</md-icon> <a md-line> ...