如何在JavaScript中转换对象数组为适配@tanstack/react-table的嵌套结构？

原始数据 #

[
    {
        name: "dhanush",
        goals: ["goal 1","goal 2"],
        goalAmount: ["10000","20000"]
    },
    {
        name: "kumar",
        goals: ["goal 3", "goal 4"],
        goalAmount: ["30000","40000"]
    },
    {
        name: "test",
        goals: ["goal 5"],
        goalAmount: ["50000"],
    }
]

目标转换结构 #

[
  {
    "name": "dhanush",
    "goals": "---",
    "goalAmount":"---",
    "subRows": [
      {
        "name": "",
        "goals": "goal 1",
        "goalAmount":" 10000"
      },
      {
        "name": "",
        "goals": "goal 2",
        "goalAmount":" 20000"
      }
    ]
  },
  {
    "name": "kumar",
    "goals": "---",
    "goalAmount":"---",
    "subRows": [
      {
        "name": "",
        "goals": "goal 3",
        "goalAmount":" 30000"
      },
      {
        "name": "",
        "goals": "goal 4",
        "goalAmount":" 40000"
      }
    ]
  },
  {
    "name": "Test",
    "goals": "goal 5",
    "goalAmount":"50000"
  }
]

转换规则 #

• 当对象的goals数组长度大于1时：
  • 主行的goals和goalAmount设为"---"
  • 新增subRows字段，将每个目标和对应金额拆分为子行，子行name为空字符串
• 当goals数组长度等于1时：
  • 直接将goals和goalAmount设为数组中的唯一值，无需subRows

错误尝试的问题 #

用户原有代码存在以下问题：

1. 生成子行时错误遍历了整个原始数据数组，导致出现多余空行
2. 当goals长度为1时，错误添加了"false"字段（布尔值false作为对象键会转为字符串）
3. 未处理goalAmount字段，转换不完整

正确转换代码 #

const originalData = [
    {
        name: "dhanush",
        goals: ["goal 1","goal 2"],
        goalAmount: ["10000","20000"]
    },
    {
        name: "kumar",
        goals: ["goal 3", "goal 4"],
        goalAmount: ["30000","40000"]
    },
    {
        name: "test",
        goals: ["goal 5"],
        goalAmount: ["50000"],
    }
];

const transformedData = originalData.map(item => {
    const { name, goals, goalAmount } = item;
    if (goals.length > 1) {
        const subRows = goals.map((goal, index) => ({
            name: "",
            goals: goal,
            goalAmount: goalAmount[index] || ""
        }));
        return {
            name,
            goals: "---",
            goalAmount: "---",
            subRows
        };
    }
    return {
        name: name.charAt(0).toUpperCase() + name.slice(1),
        goals: goals[0],
        goalAmount: goalAmount[0]
    };
});

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

代码说明 #

1. 遍历原始数组，根据goals长度分两种情况处理
2. 长度大于1时：
   • 用goals.map生成对应子行，匹配同索引的goalAmount
   • 主行设置占位符"---"并添加subRows字段
3. 长度等于1时：
   • 直接提取数组唯一值，同时将name首字母大写以匹配目标格式
4. 确保子行数量与原goals长度一致，无多余无效行

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