Не удается перебрать идентификатор массива объектов внутри метода URL руля - node.js

Question

Поэкспериментируйте с методами REST http в файле node.js с использованием пакета method-override, express и express-handlebars. Как ни странно, я могу перебирать массив объектов с помощью руля, но когда я пытаюсь назначить определенный идентификатор методу url, он назначит только 1-й элемент в этом цикле.

на html странице будет отображаться foo 1 bar 2 foobar 3

когда кнопка нажата независимо от выбранной кнопки, она будет читать после нажатия кнопки как: Ваш идентификатор: 1

Может кто-нибудь указать, почему моим URL-адресам метода кнопок не назначается конкретный идентификатор, даже если моя страница может их прочитать?

server.js

const express = require('express');
const exphbs = require('express-handlebars');

const methodOverride = require('method-override');


const app = express();
app.use(methodOverride('_method'));

var PORT = process.env.PORT || 3000;

const products = [
    {id: 5, name: 'foo'},
    {id: 2, name: 'bar'},
    {id: 3, name: 'foobar'}
];

app.engine('handlebars', exphbs({
   defaultLayout: 'main'
}));

app.set('view engine', 'handlebars');

app.get('/', (req, res, next) => {
    res.render("index", { products });
});

app.delete('/:id?', (req, res, next) => {
    res.send('your id is: ' + req.params.id);
});

app.listen(PORT, ()=> console.log('This s*** is bananas'));

index.handlebars

<ul>
    {{#each products}}
        <li>{{this.name}}</li>
        <form method="POST" action="/{{this.id}}?_method=DELETE">
        <button type="submit">DELETE</button>
        <form>
    {{/each}}
</ul>

Answer 1

Ваша проблема в том, что ваш HTML неверен. Вам не хватает символа "/" в закрывающем теге формы, </form>, Ваш браузер, пытаясь разобраться в неверной разметке, отображает только первую форму с action=/1, Все кнопки отправляют эту форму.