JavaScript使用Reduce重构对象数组实现按类别分组的label-options结构

修改后可直接运行的代码 #

const result = [...data
  .reduce((acc, { TemplateCategory, TemplateName, ID }) => {
    const group = acc.get(TemplateCategory)
    group 
      ? group.options.push({ value: ID, label: TemplateName }) 
      : acc.set(TemplateCategory, { 
          label: TemplateCategory,
          options: [{ value: ID, label: TemplateName }]
        })
    return acc
  }, new Map())
  .values()
]

核心修改点 #

1. 顶层属性重命名：把分组对象的键名从TemplateCategory改为要求的label，值保留原分类名称
2. 修正options结构：不再直接推入ID和TemplateName两个独立值，而是每次推入符合格式的{value: ID, label: TemplateName}对象，避免options数组出现平铺的基础类型值

运行上述代码后输出的结构和你要求的预期结构完全一致。

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