如何将含层级字段的HTML Form转换为JSON对象？

嘿，这个需求太常见了！这类用方括号嵌套命名的表单字段，原本是为了让后端框架能自动解析成层级结构，但如果我们要在前端把它转成对应的JSON对象，其实可以通过手动实现解析逻辑，或者借助现成工具来搞定，我给你详细说说：

先理解表单字段的命名规则 #

先拆解下你示例表单里的字段命名逻辑：

• data[zero_key]：对应JSON里的data.zero_key，属于一级属性
• data[first_key][value]：对应data.first_key.value，是嵌套对象结构
• data[second_key][]：空方括号表示这是一个数组，多个同名字段会被依次塞进数组
• data[next_key][0][type]：带数字的方括号表示数组的指定索引，对应data.next_key[0].type

方法一：手动实现解析逻辑（理解核心原理） #

我们可以自己写个JavaScript函数，遍历表单所有字段，根据字段名的结构逐步构建层级对象：

实现代码 #

function formToJson(formElement) {
  const formData = new FormData(formElement);
  const result = {};

  // 遍历所有表单字段
  formData.forEach((value, key) => {
    // 把字段名按方括号拆分，比如"data[first_key][value]"拆成["data", "first_key", "value"]
    const keys = key.match(/([^\[\]]+)/g);
    if (!keys) return;

    let current = result;
    // 逐步构建层级结构
    for (let i = 0; i < keys.length; i++) {
      const k = keys[i];
      // 如果是最后一个键，直接赋值
      if (i === keys.length - 1) {
        current[k] = value;
      } else {
        // 如果当前键对应的不是对象/数组，初始化它
        if (!current[k]) {
          // 判断下一个键是不是数字（数组索引），来决定初始化对象还是数组
          current[k] = /^\d+$/.test(keys[i+1]) ? [] : {};
        }
        current = current[k];
      }
    }
  });

  return result;
}

// 使用示例
const form = document.getElementById('to-object');
const jsonObj = formToJson(form);
console.log(JSON.stringify(jsonObj, null, 2));

转换后的结果 #

运行代码后，你的表单会被转换成如下JSON：

{
  "data": {
    "zero_key": "It`s too simple",
    "first_key": {
      "value": "It`s simple too"
    },
    "second_key": [
      "Push me",
      "Push me please"
    ],
    "next_key": [
      {
        "type": "I don`t wanna be object with key 0. ",
        "number": "I`m array!!!"
      }
    ]
  }
}

方法二：用现成库简化操作 #

如果不想自己写逻辑，可以用成熟的工具库来处理，比如qs（专门处理查询字符串和表单数据的库），它能完美解析这种嵌套结构：

使用步骤 #

1. 先引入qs库（可以通过CDN或者npm安装）
2. 通过FormData获取表单数据，转成URL参数字符串后用qs.parse()解析：

// 假设已引入qs库
const form = document.getElementById('to-object');
const formData = new FormData(form);
const paramsString = new URLSearchParams(formData).toString();
const jsonObj = qs.parse(paramsString, { depth: Infinity });

console.log(JSON.stringify(jsonObj, null, 2));

这个方法更省心，还能处理各种边缘情况（比如更复杂的嵌套、重复字段等）。

注意事项 #

• 如果表单包含复选框、单选按钮，要确保它们的name属性也遵循嵌套规则，FormData会自动处理选中的值
• FormData获取到的字段值都是字符串类型，如果需要数字、布尔值，得额外做类型转换

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