PugJS 试图在表单属性上使用变量值答案

【问题标题】：PugJS trying to use variable values on form attributesPugJS 试图在表单属性上使用变量值
【发布时间】：2021-12-30 20:55:02
【问题描述】：

我目前正在尝试使用 PugJS 进行测验。我正在尝试对表单发布时正文中的答案进行分组。

目前，当我发布以下表格时，我得到了这些数据：

console.log(JSON.stringify(req.body));

返回以下内容：{"answer":["a","b","c","d","e","f"]}

所有数据都在同一个“答案”对象中。在我的 PugJS 文件中，我执行以下操作：

block contents
    form(action=url, method='POST')
        each question in config
            h1= question.question
            .row.mb-3
                - for (var x = 0; x < question.requiredAnswers; x++)
                    label.col-sm-2.col-form-label(for='answer') Antwoord #{x + 1}
                    .col-sm-10
                        input.form-control(type='text' name='answer' id='answer')
            hr
        button.btn.btn-primary(type='submit', value='Submit') Verzend de antwoorden

如您所见，我一直使用相同的标签（for='answer'）和输入（name='answer' id='answer'）

我尝试使用变量 x 将对象更改为：label(for='answer #{x + 1}') 和 input(name='answer #{x + 1}' id='answer #{ x + 1}')

我想要的输出： {"answer1":["a"], "answer2":["b","c"], "answer3":["d","e","f"]}

我也尝试使用 #{x + 1} 转义变量，但没有成功！

【问题讨论】：

标签： node.js pug

【解决方案1】：

浏览器只会以简单的键值对形式提交表单参数。如果有多个具有相同名称的键，它们将按原样重复提交。我认为是 Express body-parser 中间件将同名的键转换为数组。

在 Express 中，如果 someParameter 在您的表单中仅出现一次，则 req.body.someParameter 是一个字符串值。如果该参数被多次接收，则它是一个字符串数组。

doctype html
html
  body
    //- Test data:
    - const config = [ { requiredAnswers: 1}, { requiredAnswers: 2},{ requiredAnswers: 3}]
    form(method="post")
      each question,i in config
        p Q#{i+1}
          ul 
            - for (let x=0; x<question.requiredAnswers; x++)
              label(for="Q"+i+"A"+x) Antwoord #{x+1} 
              input(name="answer"+(i+1) id="Q"+i+"A"+x)
              br
      input(type="submit")

点击上面的labels 将正确设置焦点到每个相应的输入框。当使用您使用的相同值提交时，浏览器会在请求负载中发送以下内容：

answer1=a&answer2=b&answer2=c&answer3=d&answer3=e&answer3=f

而服务器上的req.body 是：

{"answer1":"a","answer2":["b","c"],"answer3":["d","e","f"]}

【讨论】：