While working on my api using node/express and jquery, I encountered an issue where my DELETE requests are not functioning as expected.
JQUERY:
$('.formula-body').on('click', function (e) {
if (e.target.className == 'fa-trash-o') {
$.ajax({
url: 'formula-api/' + e.target.id,
type: 'DELETE',
success: updateIngredient
});
}
});
function updateIngredient(data) {
$('.formula-body').empty();
var output = '';
$.each(data, function (key, item) {
output = `
<tr>
<td>${item.name}</td>
<td>${item.amount}</td>
<td>${item.notes}</td>
<td><a><span id ="${key}" class="fa fa-trash-o"> </span></a></td>
</tr>
`;
$('tbody').append(output);
});
};
HTML:
<div class="centered">
<h2>Your Formula</h2>
<table class="centered-block pure-table pure-table-striped formula-table">
<thead class="thead-styled">
<tr class="centered">
<th>Ingredient</th>
<th>Amount</th>
<th>Notes</th>
<th></th>
</tr>
</thead>
<tbody class="formula-body">
</tbody>
</table>
This is how I've set up the routing in express to handle the DELETE request.
ROUTES:
var app = require('express');
var router = app.Router();
var formulas = require('../data/formula.json');
router.get('/formula-api', function(req, res){
res.json(formulas);
});
router.post('/formula-api', function(req, res){
formulas.push(req.body);
res.json(formulas);
});
router.delete('/formula-api/:id', function(req, res) {
formulas.splice(req.params.id, 1);
formulas.push(req.body);
res.json(formulas);
});
module.exports = router;
Although the POST and GET requests are functioning properly, I am unable to figure out why the DELETE request is not. The console does not show any errors.
I have already imported the body-parser utility into app.js, so that should not be causing the problem.
The main concept behind this is to add a new row to the table each time a form is submitted.
The visual representation of the page can be seen here: https://i.stack.imgur.com/rcbkx.png
The objective is for the trash can icon to delete the respective row when clicked, but currently it is non-functional.