如何遍历嵌套JSON对象生成数据库可用的formData对象？

我们有一个多步骤表单返回的JSON数组，每个元素包含表单标题和对应的字段列表，需要将其转换为以label为键、value为值的扁平对象，用于写入数据库。

输入的JSON结构 #

[
  {
    "title": "Personal Details",
    "fields": [
      {
        "label": "FirstName",
        "value": "John"
      },
      {
        "label": "SecondName",
        "value": "Doe"
      },
      {
        "label": "Age",
        "value": "22"
      }
    ]
  },
  {
    "title": "Address",
    "fields": [
      {
        "label": "City",
        "value": "New York"
      },
      {
        "label": "ZipCode",
        "value": "10001"
      },
      {
        "label": "County",
        "value": "NY County"
      },
      {
        "label": "State",
        "value": "NY"
      }
    ]
  }
]

目标对象结构 #

{
  FirstName: "John",
  SecondName: "Doe",
  Age: "22",
  City: "New York",
  ZipCode: "10001",
  County: "NY County",
  State: "NY"
}

使用 forEach 实现的方法 #

通过两层forEach循环遍历数组和字段列表，逐步构建目标对象：

// 假设输入的多步骤表单数据为formSteps
const formSteps = [/* 你的输入JSON数组 */];
const formData = {};

// 遍历每个表单步骤
formSteps.forEach(step => {
  // 遍历当前步骤的所有字段
  step.fields.forEach(field => {
    // 将label作为键，value作为值存入formData
    formData[field.label] = field.value;
  });
});

console.log(formData);

代码解释

1. 初始化空对象formData，用于存储最终的键值对结果。
2. 外层forEach遍历多步骤表单的每个步骤对象，每个步骤包含title和fields数组。
3. 内层forEach遍历当前步骤的fields数组，取出每个字段的label和value，将其对应存入formData。
4. 循环结束后，formData即为所需的扁平键值对对象，可直接用于数据库写入。

可选：使用 reduce 实现（更简洁写法） #

如果追求代码紧凑性，也可以用数组reduce方法实现，原理和forEach一致：

const formData = formSteps.reduce((acc, step) => {
  step.fields.forEach(field => {
    acc[field.label] = field.value;
  });
  return acc;
}, {});

内容的提问来源于stack exchange，提问作者Ralf Bordé