表单提交后如何获取与输入位置对应的有序数组？

我正在创建一个可编辑表单，提交后通过console.log(req.body)获取数据时，出现数组顺序异常的问题：在第4个输入框中输入“111”，该值却出现在Unidad数组的第1位，而我期望它位于数组的第4位，以便通过索引操作特定值。

当前返回的数组示例：

Unidad: [
    '111', '', '', '', '', '', '', '', '', '', '',
    '',    '', '', '', '', '', '', '', '', '', '',
    '',    '', '', '', '', '', '', '', '', '', '',
    '',    '', '', '', '', '', '', '', '', '', '',
    '',    '', '', '', '', '', '', '', '', '', '',
    '',    '', '', '', '', '', '', '', '', '', '',
    '',    '', '', '', '', '', '', '', '', '', '',
    '',    '', '', '', '', '', '', '', '', '', '',
    '',    '', '', '', '', '', '', '', '', '', '',
    '',
    ... 420 more items
]

期望的数组示例：

Unidad: [
    '', '', '', '', '111', '', '', '', '', '', '',
    '',    '', '', '', '', '', '', '', '', '', '',
    '',    '', '', '', '', '', '', '', '', '', '',
    '',    '', '', '', '', '', '', '', '', '', '',
    '',    '', '', '', '', '', '', '', '', '', '',
    '',    '', '', '', '', '', '', '', '', '', '',
    '',    '', '', '', '', '', '', '', '', '', '',
    '',    '', '', '', '', '', '', '', '', '', '',
    '',    '', '', '', '', '', '', '', '', '', '',
    '',
    ... 420 more items
]

我的表单提交代码如下：

<form action="/EdicionMaterialesPost" method="POST" enctype="multipart/form-data">
<% for (var a = 0; a < materiales.length; a++) { %>

<tr> 

    <th> <%=materiales[a].Descripcion%> <input type="text" class="form-control" id="Descripcion" name="Descripcion"> 
    </th>                                
    <th>    <%=materiales[a].Codigo%> <input type="text" class="form-control"  id="Codigo" name="Codigo"> 
                                        
    </th>
    <th>  <%=materiales[a].Unidad%> <input type="text" class="form-control"  id="Unidad" name="Unidad" >
                                        
    </th>
    <th>  <%=materiales[a].PrecioUnitario%> <input type="number" class="form-control" id="PrecioUnitario" name="PrecioUnitario">

    </th>
    <th>   <%=materiales[a].Familia%> <input type="text" class="form-control" id="Familia" name="Familia">
                                        
    </th>
    <th>   <%=materiales[a].SubFam%> <input type="text" class="form-control"  id="SubFam" name="SubFam">
                                        
    </th>

</tr>      
<input type="hidden" class="form-control" id="DescripcionBusqueda" name="DescripcionBusqueda" value="<%=materiales[a].Descripcion%>">

<% } %>
<button type="submit" id="sendMessageButton">Guardar Cambios</button></form>

问题原因 #

当前所有同类型输入框的name属性完全相同（比如Unidad），后端解析表单数据时，只会优先将有值的输入框内容放入数组，空值输入框要么被忽略，要么被追加到数组末尾，导致数组顺序和表单渲染的行顺序不匹配，无法通过索引对应到正确的行数据。

解决方案 #

给每个输入框的name属性添加明确的索引标识，格式为name="字段名[<%=a%>]"，这样后端会严格按照索引位置构建数组，空值输入框也会被保留在对应索引位置，确保数组顺序和表单行顺序完全一致。

同时补充修改：

• 给id属性加上索引，避免页面出现重复id元素，符合HTML规范
• 给输入框添加value属性，默认填充原始数据，确保空值也能被正确提交到对应位置

修改后的表单代码：

<form action="/EdicionMaterialesPost" method="POST" enctype="multipart/form-data">
<% for (var a = 0; a < materiales.length; a++) { %>

<tr> 
    <th> <%=materiales[a].Descripcion%> <input type="text" class="form-control" id="Descripcion_<%=a%>" name="Descripcion[<%=a%>]" value="<%=materiales[a].Descripcion%>"> 
    </th>                                
    <th> <%=materiales[a].Codigo%> <input type="text" class="form-control" id="Codigo_<%=a%>" name="Codigo[<%=a%>]" value="<%=materiales[a].Codigo%>"> 
    </th>
    <th> <%=materiales[a].Unidad%> <input type="text" class="form-control" id="Unidad_<%=a%>" name="Unidad[<%=a%>]" value="<%=materiales[a].Unidad%>">
    </th>
    <th> <%=materiales[a].PrecioUnitario%> <input type="number" class="form-control" id="PrecioUnitario_<%=a%>" name="PrecioUnitario[<%=a%>]" value="<%=materiales[a].PrecioUnitario%>">
    </th>
    <th> <%=materiales[a].Familia%> <input type="text" class="form-control" id="Familia_<%=a%>" name="Familia[<%=a%>]" value="<%=materiales[a].Familia%>">
    </th>
    <th> <%=materiales[a].SubFam%> <input type="text" class="form-control" id="SubFam_<%=a%>" name="SubFam[<%=a%>]" value="<%=materiales[a].SubFam%>">
    </th>
</tr>      
<input type="hidden" class="form-control" id="DescripcionBusqueda_<%=a%>" name="DescripcionBusqueda[<%=a%>]" value="<%=materiales[a].Descripcion%>">

<% } %>
<button type="submit" id="sendMessageButton">Guardar Cambios</button></form>

效果说明 #

修改后，req.body.Unidad数组的索引会和表单循环的a值完全对应，第4行（索引为3）的输入值会准确出现在数组的第4位（索引3），你可以直接通过索引操作对应位置的数据。

内容的提问来源于stack exchange，提问作者Aaron Rodriguez