如何将JavaScript对象数组转换为指定键值对结构（适配React Chart JS 2）

你可以通过结合Array.map()和Array.forEach()（或Array.reduce()）完成数据结构转换，下面是两种适合新手理解的简单实现方式：

方法1：map + forEach（逻辑更直观） #

先遍历原数组的每个年份项，再逐个处理等级数据的键值对：

const charData = [
    {
        "year": "2020",
        "value": [
            { "levelName": "Platinum", "yearlyCount": "1074" },
            { "levelName": "Gold", "yearlyCount": "1847" },
            { "levelName": "Silver", "yearlyCount": "4804" }
        ]
    }
];

const transformedData = charData.map(item => {
    // 初始化包含年份的基础对象
    const formattedItem = { year: item.year };
    // 遍历等级数据，把levelName作为键、yearlyCount作为值添加到对象中
    item.value.forEach(level => {
        formattedItem[level.levelName] = level.yearlyCount;
    });
    return formattedItem;
});

console.log(transformedData);
// 输出结果与目标结构完全一致

方法2：map + reduce（代码更简洁） #

用reduce直接合并嵌套的等级数据到初始对象中：

const transformedData = charData.map(item => {
    // 以含年份的对象为初始值，通过reduce合并所有等级键值对
    return item.value.reduce((acc, level) => {
        acc[level.levelName] = level.yearlyCount;
        return acc;
    }, { year: item.year });
});

两种方法最终都会输出你需要的目标结构，转换后的数据可直接用于React Chart JS 2的配置项中。

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