JS对象数组转换为DevExtreme Grid行数据格式的实现问题

针对平铺的「人群-策略-优先级」关联数据转DevExtreme Reactive React Grid适配行结构的需求，可直接通过以下reduce逻辑实现：

完整实现代码 #

const result = Object.values(
  data.reduce((groupedMap, currentItem) => {
    const strategyName = currentItem.nameStrategy
    // 注意：你原有代码中写的nameStrategie为拼写错误，正确属性名是nameStrategy
    // 初始化当前策略对应的行对象
    if (!groupedMap[strategyName]) {
      groupedMap[strategyName] = {
        nameStrategy: strategyName
      }
    }
    // 拼接对应人群的优先级字段名，赋值优先级
    const priorityField = `priorityPopulation${currentItem.idPopulation}`
    groupedMap[strategyName][priorityField] = currentItem.priority
    return groupedMap
  }, {})
)

输出结果 #

运行后得到的结构完全匹配目标要求：

[
  {
    nameStrategy: "Strategy 1",
    priorityPopulation1: 1,
    priorityPopulation2: null,
    priorityPopulation3: 1
  },
  {
    nameStrategy: "Strategy 2",
    priorityPopulation1: null,
    priorityPopulation2: null,
    priorityPopulation3: 2
  },
  {
    nameStrategy: "Strategy 3",
    priorityPopulation1: 2,
    priorityPopulation2: 1,
    priorityPopulation3: 3
  }
]

方案说明 #

• 无需提前硬编码人群数量，代码会自动根据原始数据中的idPopulation生成对应列字段，后续新增人群时不需要修改转换逻辑
• 通过Object.values将分组后得到的对象转为数组，直接符合Grid组件要求的行数组格式
• 自动兼容priority为null的场景，和原始数据逻辑完全一致

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