HTML Multiple select not returning array - html

Question

I'm trying to make a web application using express and I'm trying to make a form to create a new product. In there I have multiple select to select the categories for the product.
Here is my code for the multi-select:
<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>
The target is for it to fill in the products.categories field with an array of categories.
But this is what I receive on the server:
{
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' ]
}
It doesn't seem to want to format the array properly and I'm unsure as to why this is.
I've already tried removing the second brackets in the name field to get
product[categories]
But then it doesn't return an array when just a single item is selected.
Is there an alternative way of me doing this or should I just use the above and convert it to an array on the server?

Answer 1

It works without extra server-side code if you change the name to
<select multiple name="product[categories]">
(without the nested brackets). Then the request
GET path?product[categories]=a&product[categories]=b
will be parsed into
req.query = {"product":{"categories":["a","b"]}}
and the request
POST path
Content-Type: application/x-www-form-urlencoded
product[categories]=a&product[categories]=b
will be parsed into
req.body = {"product":{"categories":["a","b"]}}
if you use the body-parsing middleware express.urlencoded({extended: true}) with the extended: true option.