SvelteKit Action中如何接收对象数组形式的表单数据？

我是SvelteKit新手，表单输入的name属性设置如下：

input 1: config[0][name]
input 2: config[0][type]
input 3: config[1][name]
input 4: config[2][type]

在SvelteKit Action中处理时，通过Object.fromEntries(await request.formData())得到的数据结构是：

{
  'config[0][name]': '',
  'config[0][type]': '',
  'config[1][name]': '',
  'config[1][type]': ''
}

只能通过formData['config[0][name]']这种方式访问，而我希望能直接用formData.config[0].name这种嵌套数组/对象的形式访问。我的Action代码如下：

const create: Action = async ({request})=> {
  const formData = Object.fromEntries(await request.formData());
  
  console.log("data", formData);
}

解决方案 #

你需要实现一个解析函数，将带括号的扁平键名转换为嵌套的对象/数组结构。以下是可直接使用的实现：

function parseFormDataKeys(data) {
  const result = {};
  
  for (const [key, value] of Object.entries(data)) {
    // 把"config[0][name]"转换为"config.0.name"后拆分键名数组
    const keys = key.replace(/\[(\w+)\]/g, '.$1').split('.');
    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;
}

在你的Action中调用这个函数：

const create: Action = async ({request})=> {
  const rawFormData = Object.fromEntries(await request.formData());
  const formData = parseFormDataKeys(rawFormData);
  
  console.log("data", formData);
  // 现在可以直接访问 formData.config[0].name、formData.config[1].name 等
}

核心逻辑说明 #

• 将带括号的键名转换为点分隔格式，例如config[0][name]处理为config.0.name
• 拆分键名为数组后，逐层遍历构建嵌套结构
• 检测到下一级键是纯数字时，自动创建数组；否则创建普通对象

内容的提问来源于stack exchange，提问作者Idris Akbar Adyusman