如何将JavaScript表单收集的键值数据转换为数据库要求的对象结构

核心逻辑 #

原始数据是二维数组结构，每个子数组对应一组「列名+值」的配对，我们只需要遍历每个子数组提取对应字段，就能组装成符合要求的提交对象。

基础实现（易读性高，适合初学者） #

// 你采集到的原始数据
const rawFormData = [
  [{
      label: "Column",
      value: "column1",
      name: "01",
    },
    {
      label: "Value",
      value: "value1",
      name: "02",
    },
  ],
  [{
      label: "Column",
      value: "column2",
      name: "10",
    },
    {
      label: "Value",
      value: "value2",
      name: "11",
    },
  ],
];

// 初始化最终提交对象
const submitData = {
  // 此处可添加其他需要提交的自定义字段
  column_names: {}
};

// 遍历处理原始数据
rawFormData.forEach(fieldPair => {
  // 从当前分组中查找列名项和值项
  const columnField = fieldPair.find(item => item.label === 'Column');
  const valueField = fieldPair.find(item => item.label === 'Value');
  
  // 非空判断，避免缺项时报错
  if (columnField?.value && valueField) {
    submitData.column_names[columnField.value] = valueField.value;
  }
});

// 输出的submitData就是符合要求的结构
console.log(submitData);

精简写法（用reduce直接生成目标对象） #

const columnNames = rawFormData.reduce((result, fieldPair) => {
  const column = fieldPair.find(i => i.label === 'Column')?.value;
  const value = fieldPair.find(i => i.label === 'Value')?.value;
  if (column && value) result[column] = value;
  return result;
}, {});

const submitData = {
  // 其他自定义字段
  column_names: columnNames
};

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