如何对对象数组进行分组计数 适配堆叠柱状图的数据格式要求

完整实现代码 #

// 后端返回的原始数据
const rawData = [
  {date: 'January', category: 'A'},
  {date: 'January', category: 'B'},
  {date: 'February', category: 'A'},
  {date: 'February', category: 'B'},
  {date: 'February', category: 'C'},
  {date: 'February', category: 'B'},
]

// 动态获取所有不重复的分类，适配后续新增分类的场景
const allCategories = [...new Set(rawData.map(item => item.category))]

// 按月份分组统计各分类数量
const groupedObj = rawData.reduce((acc, current) => {
  const { date, category } = current
  // 首次遇到对应月份时初始化数据，所有分类默认计数为0
  if (!acc[date]) {
    acc[date] = { name: date }
    allCategories.forEach(cate => acc[date][`count${cate}`] = 0)
  }
  // 对应分类计数+1
  acc[date][`count${category}`]++
  return acc
}, {})

// 转换为目标数组格式
const formattedData = Object.values(groupedObj)
console.log(formattedData)

逻辑说明 #

• 无需硬编码月份、分类字段，后续新增分类或月份不需要修改逻辑，适配性更强
• 初始化时自动给未出现的分类赋值为0，完全匹配堆叠柱状图的数据要求
• 原有代码仅统计了单月总数据量，没有拆分到分类维度，且硬编码月份扩展性极差，上述方案解决了这两个问题

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