如何提取嵌套数组的组合层级键值作为Chart.js图表的显示标签

解决方案 #

你之前的代码在第一步flatMap时直接调用Object.values(obj)，把上层的TITANIC.xxx_CONTRIBUTION这类键名丢弃了，自然没法后续拼接。调整遍历逻辑，提前保留父层键即可：

仅生成目标标签

const labels = data.flatMap(item => {
  // 取出当前项的父键和对应的贡献值对象
  const [parentKey, contributionObj] = Object.entries(item)[0]
  // 遍历子层分组，拼接父键和分组名
  return Object.keys(contributionObj).map(groupName => `${parentKey} ${groupName}`)
})

执行后labels数组就是你需要的标签列表，可以直接传给Chart.js的labels配置项。

同时保留标签和对应数值（更适合Chart.js场景）

如果你同时需要拼接后的标签和对应的贡献数值，直接生成适配Chart.js的数据集即可：

const chartDataset = data.flatMap(item => {
  const [parentKey, contributionObj] = Object.entries(item)[0]
  return Object.entries(contributionObj).map(([groupName, value]) => ({
    label: `${parentKey} ${groupName}`,
    value: value
  }))
})

// 提取标签
const labels = chartDataset.map(item => item.label)
// 提取数值
const values = chartDataset.map(item => item.value)

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