NodeJS HTML多选不返回数组

2nc8po8w  于 2023-01-25  发布在  Node.js
关注(0)|答案(1)|浏览(100)

我正在尝试使用express制作一个Web应用程序,并且正在尝试制作一个表单来创建一个新产品。在那里我有多个选择来选择产品的类别。下面是我的多个选择的代码:

<div class="form-group row mb-3">
        <label for="categories" class="col-form-label sol-sm-2">Categories:</label>
        <div class="col-sm-10">
            <select multiple name="product[categories[]]" id="categories" class="form-control">
                <% for (let category of categories) { %>
                <option value="<%= category.id %>">
                    <%= category.name %>
                </option>
                <% } %>
            </select>
        </div>
    </div>

它的目标是在products.categories字段中填入一个categories数组,但这是我在服务器上收到的结果:

{
  product: {
    name: 'Nvidia GeForce RTX 4090',
    price: '1499.99',
    description: 'State-of-the-art GPU. Recently released with unrivalled performance. Take your gaming to the next level!',
    discountedPrice: '',
    stock: '5'
  },
  'product[categories': [ '63a18514fade00e8bc7f4d1c' ]
}

它似乎不想正确地格式化数组,我不确定为什么会这样。我已经试过删除名称字段中的第二个括号,以获得

product[categories]

但是,当只选择一个项目时,它不会返回数组。
是否有其他方法可以实现这一点,或者我应该使用上面的方法并将其转换为服务器上的数组?

hs1ihplo

hs1ihplo1#

如果将名称更改为,则无需额外的服务器端代码即可工作

<select multiple name="product[categories]">

(不带嵌套的方括号)。然后请求

GET path?product[categories]=a&product[categories]=b

将被解析为

req.query = {"product":{"categories":["a","b"]}}

并且该请求

POST path
Content-Type: application/x-www-form-urlencoded

product[categories]=a&product[categories]=b

将被解析为

req.body = {"product":{"categories":["a","b"]}}

如果您使用带有extended: true选项的主体解析中间件express.urlencoded({extended: true})

相关问题