如何将含动态键名和嵌套数组的对象数组转换为图表适配的简化格式

完整代码 #

function formatChartData(data) {
  // 取所有winRatio的最大长度，确定输出数组长度
  const maxLength = Math.max(...data.map(item => item.winRatio.length))
  // 按长度生成输出数组
  return Array.from({ length: maxLength }, (_, index) => {
    const currentItem = { index }
    // 填充每个name对应下标的胜率值
    data.forEach(({ name, winRatio }) => {
      // 长度不足的位置默认用null占位，可按需修改为0等默认值
      const value = winRatio[index]
      // 可按需开启精度保留，和示例输出格式对齐
      // currentItem[name] = value ? Number(value.toFixed(4)) : null
      currentItem[name] = value ?? null
    })
    return currentItem
  })
}

调用测试 #

const data = [
  {
    name: 'Tyler',
    winRatio: [1, 0.5, 0.6666666666666666],
  },
  {
    name: 'Lizzie',
    winRatio: [0, 0.5, 0.3333333333333333],
  },
];
const formatted = formatChartData(data)
console.log(formatted)

逻辑说明 #

• 优先计算所有winRatio数组的最大长度，保证输出数组长度符合要求，不会丢失最长数组的内容
• 用Array.from直接生成对应长度的数组，自动匹配每个项的index值
• 遍历每个下标时，批量填充所有用户对应位置的胜率值，逻辑简洁易维护

注意事项 #

• 如果原始数据存在重复的name字段，建议先对输入数据做去重，避免后面的同名数据覆盖前面的取值
• 缺省值可根据业务需求调整：适配Recharts时空值传null图表会自动断开线，传0的话会落到0轴位置

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