💡 The only one reason why you get 404 ERROR is because your route not found.
Why your route not Found? It's because in your handler: server.js or app.js, you're set a method delete like this:
app.delete('/api/delete/:index',deleteRouter)
💡 You should not to do that, because you ever set delete method in the deletion.js. So, you only need to make something like this:
app.use('/api/delete/:index',deleteRouter)
The code above 👆 only for example. If that confuses you, you can see the full code below.
👨🏫 You can do it like this code below 👇:
deletion.js
router.delete('/:index',(req,res)=>{
var item = req.params.index;
console.log(`req.params.index is ${req.params.index}`)
let deletion = `DELETE FROM tnotesapi1.tearecords
WHERE primary_key = ${item}`
client.query(deletion, (res,err)=>{
if(err){
console.error(`Record Query error, ${err.stack}`)
}else{
console.log('Item has been deleted from dB')
res.send()
}
})
})
💡 In the code above 👆, you have to add a params. Because you're using index, than you have to add index as params.
server/app.js
app.use('/api/delete', deleteRouter)
💡 Now, in your server or app handler, you don't have to using delete again. Because you use it in your deletion.js.
Frontend: using axios
// change with your endpoint
const endPoint = 'http://localhost:3000/api/delete/' + index;
axios.delete(endpoint)
.then(response => {
console.log(response.data);
}).catch(ex => {
console.log(ex.data);
})
📤 Updated: Using Fetch.
If you're using React, then you can use fetch in there, without using axios.
You can use an example code below:
async handleDelete(index) {
try {
// change the endpoint with yours
const endpoint = 'http://localhost:3000/api/delete/' + index;
const result = await fetch( endpoint, { method: 'DELETE' });
const json = await result.json();
console.log(json);
// do some stuff here: set state or some stuff you want
} catch(ex) {
console.log(ex);
}
}
💡 The code above 👆 an example, how to send delete request to your backend using fetch in react.
I hope it's can help you 🙏.
