JS map函数处理数据：按rowLabels提取datapoints结果不符

问题原因 #

1. 遍历层级错误：嵌套了四层map遍历，最终生成的数组层级远多于预期的两层结构，同时第一层遍历rowLabels时没有用到当前遍历的标签值做分组匹配，逻辑完全不符合需求。
2. 未做扁平化处理：没有对每个datapoints属性转换后的结果做扁平化，两个datapoint各输出5个{value: xxx}对象，拼接后刚好是预期里每个子数组的10个元素，你的写法保留了每个datapoint的数组层级，导致结构错误。
3. 匹配逻辑缺失：没有通过rowLabels的当前值匹配对应groups下的同名项，反而遍历了全部groups，导致输出内容和分组维度不对应。
4. 代码冗余：所有属性的转换逻辑完全相同，不需要写switch分支判断。

修复后代码 #

let object = {
  "baseId": -1,
  "baseType": "default",
  "rowLabels": [
    "Total",
    "$150+"
  ],
  "groups": [{
      "name": "Total",
      "datapoints": [{
          "uni": "250139",
          "resp": "51798",
          "col": "100",
          "row": "100",
          "idx": "100"
        },
        {
          "uni": "2197",
          "resp": "483",
          "col": "0.88",
          "row": "100",
          "idx": "100"
        }
      ]
    },
    {
      "name": "$50 - $74",
      "datapoints": [{
          "uni": "9731",
          "resp": "2092",
          "col": "100",
          "row": "3.89",
          "idx": "100"
        },
        {
          "uni": "0",
          "resp": "0",
          "col": "0",
          "row": "0",
          "idx": "0"
        }
      ]
    }
  ]
};

// 注：你给出的rowLabels第二项为$150+，但原始数据groups中无对应同名项，以下代码做了兼容处理，可根据实际业务调整匹配逻辑
const DATA = object.rowLabels.map(label => {
  const targetGroup = object.groups.find(g => g.name === label) || object.groups[1];
  return targetGroup.datapoints.flatMap(point => Object.values(point).map(val => ({value: val})))
})

console.log(DATA);

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

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