POST表单提交平级数据如何自动映射匹配原有嵌套对象结构

你可以通过以下两种常用方案实现自动映射，不需要手动逐个赋值： #

方案1：修改前端表单name属性（优先推荐） #

绝大多数服务端的请求体解析中间件都原生支持[]格式的嵌套字段命名规则，你只需要调整Pug模板里输入框的name属性，提交后后端可以直接得到符合要求的嵌套结构，不需要额外做转换：
修改后的Pug代码：

form(action="/foo",method="POST")
    p Foo:
        input(type="text", name="foo1", value="value2")
    table
        tbody
             tr
                  td
                       input(type="text", name="values[foo2]", value="value2")
                  td
                       input(type="text", name="values[foo3]", value="value2")
    input(type="submit",value="Submit")

提交后直接就能拿到结构：

{
   "foo1":"value2",
   "values": {
       "foo2":"value2",
       "foo3":"value2"
   }
}

方案2：后端平级数据自动转换 #

如果你无法修改前端表单代码，可以提前定义字段映射规则，写一个通用转换函数实现自动映射：

步骤1：定义字段与嵌套路径的映射关系 #

// 键为平级数据的字段名，值为对应嵌套对象的路径
const fieldMapping = {
  foo1: 'foo1',
  foo2: 'values.foo2',
  foo3: 'values.foo3'
}

步骤2：写通用转换函数（原生JS实现，无需依赖） #

function mapToNested(flatData, mapping, defaultNested = {}) {
  const result = JSON.parse(JSON.stringify(defaultNested)) // 保留原始嵌套结构的默认值
  Object.keys(flatData).forEach(key => {
    if (!mapping[key]) return
    const path = mapping[key].split('.')
    let current = result
    for (let i = 0; i < path.length - 1; i++) {
      if (!current[path[i]]) current[path[i]] = {}
      current = current[path[i]]
    }
    current[path[path.length - 1]] = flatData[key]
  })
  return result
}

调用示例 #

// 原始嵌套对象的默认结构
const originalSchema = {
  "foo1":"value",
  "values": {
      "foo2":"value",
      "foo3":"value"
  }
}
// 提交拿到的平级数据
const flatData = {
  "foo1":"value2",
  "foo2":"value2",
  "foo3":"value2"
}

const nestedData = mapToNested(flatData, fieldMapping, originalSchema)
// 输出结果就是你需要的嵌套结构

如果你项目里已经引入了lodash，可以用_.set方法简化转换函数的代码。 #

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