Estoy tratando de hacer una lista simple de tareas y no puedo descifrar el botón "eliminar". No recibo ningún error, los botones simplemente no hacen nada. Intenté muchas cosas, pero parece que no puedo hacer que funcione. No estoy seguro si el problema es con la acción del formulario en el archivo ejs o con app.delete en mi index.js o ambos. ¡Gracias de antemano!
archivo ejs:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>To Do List</title> </head> <body> <h1>To Do List</h1> <form action="/todo" method="post"> <input type="text" name="task"> <button>Add</button> </form> <ul> <% for(let c of todos) { %> <li> <%= c.task %> <form action="/todo/<%=c.id%>?_method=DELETE" method="POST"><button>Delete</button></form> <%= c.id%> </li> <% } %> </ul> </body> </html>archivo index.js:
const express = require('express'); const app = express(); const path = require('path'); const methodOverride = require('method-override'); const { v4: uuid } = require('uuid'); uuid(); app.use(methodOverride('_method')); app.use(express.urlencoded({ extended: true })); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); let todos = [ { id: uuid(), task: '1st task, testing' } ] //TO DO INDEX app.get('/todo', (req, res) => { res.render('todo', { todos }); }) //CREATE NEW TASK app.post('/todo', (req, res) => { const { task, id } = req.body; todos.push({ task, id: uuid() }); res.redirect('todo') }) //DELETE TASK app.delete('/todo/:id', (req, res) => { const { id } = req.body; todos = todos.filter(c => c.id !== id); console.log(todos); res.redirect('/todo') }) app.listen(3000, () => { console.log('LISTENING ON PORT 3000') })Ha configurado la ruta de eliminación en su aplicación express con el tipo de método DELETE que es app.delete (…), pero en su formulario html
<form action="/todo/<%=c.id%>?_method=DELETE" method="POST">El método se menciona como POST. Así que express no lo acepta.
El formulario en html solo permite solicitudes GET y POST.
Deberá activar esas llamadas de eliminación de API usando fetch api o jquery o ajax.
Además, no estoy seguro de por qué ese _method=DELETE está escrito en acción de formulario. Según yo, no es necesario si su interfaz es jinja/Django. Si es otra cosa, no estoy seguro.
Para obtener más información sobre por qué no funciona, abra la pestaña de red en la consola del navegador y haga clic en su botón. Debería enviar una llamada de red a su backend y debería poder ver allí por qué el backend no está haciendo nada para esa llamada.
RESUELTO
Solo tuve que cambiar const { id } = req.body; a const { id } = req.params;