I am working on a project where I have a button in my client's application that is supposed to delete a document from a MongoDB collection based on its ID. Here is the backend code for this functionality:
index.js:
router.post('/deletetask', async function (req, res, next) {
let result = await dbModule.deleteTask(req.body.taskID);
res.json(result);
});
In the dbModule.js file that I created:
deleteTask: (taskID) => {
return Task.findByIdAndDelete({_id: taskID});
}
When testing this through Postman, it successfully deletes the task from the collection. Moving on to the client-side code, here is what it looks like:
This is the HTML:
<button class="btn btn-danger" (click)="deleteTask(task._id)">Delete
<!-- There is an SVG icon here, removed for clarity -->
</button>
The corresponding TypeScript component:
deleteTask(taskID)
{
this.dbService.deleteTask(taskID).subscribe(data => {
console.log(data);
});
this.router.navigate(['/tracker']); <!-- redirect to simulate a refresh -->
}
The service code is as follows:
deleteTask(taskID):Observable<any>
{
return this.http.post("http://localhost:3000/deletetask", taskID, httpOptions);
}
However, when implementing the client-side code and attempting to run the function, I continuously receive a "POST http://localhost:3000/deletetask 400 (Bad Request)" error.
I am puzzled by what could be causing this issue. Initially, I suspected it might be a CORS problem, but I have already installed the CORS npm package. Additionally, I have another function within the application that adds tasks using a POST call to the server, and that works without any problems. Any suggestions or insights?