如何在JavaScript中将对象数组转换为指定图表数据格式？

输入数据 #

const inputData = [
    {
        "time": "18th",
        "open": 100,
        "closed": 60,
        "waiting": 12
    },
    {
        "time": "20th",
        "open": 120,
        "closed": 80,
        "waiting": 75
    },
    {
        "time": "22nd",
        "open": 170,
        "closed": 0,
        "waiting": 34
    }
];

目标输出格式 #

{
    "time": ["18th", "20th", "22nd"],
    "graphData": [
        {
            "label": "open",
            "data": [100, 120, 170]
        },
        {
            "label": "closed",
            "data": [60, 80, 0]
        },
        {
            "label": "waiting",
            "data": [12, 75, 34]
        }
    ]
}

实现方案 #

方法一：基础遍历构建（易理解）

通过两次遍历分别提取时间数组和各指标数据，逻辑直观，适合新手快速理解：

function transformData(input) {
    // 提取所有时间值
    const time = input.map(item => item.time);
    // 指定需要转换的指标字段
    const targetFields = ['open', 'closed', 'waiting'];
    // 构建图表数据数组
    const graphData = targetFields.map(field => ({
        label: field,
        data: input.map(item => item[field])
    }));
    
    return { time, graphData };
}

// 调用示例
const result = transformData(inputData);
console.log(result);

方法二：使用reduce单次遍历构建（更高效）

通过reduce一次遍历完成所有数据的收集，减少遍历次数，适合处理大规模数据集：

function transformData(input) {
    // 初始化中间存储结构
    const intermediate = input.reduce((acc, item) => {
        acc.time.push(item.time);
        // 逐个收集各指标的数据
        ['open', 'closed', 'waiting'].forEach(field => {
            acc.dataMap[field].push(item[field]);
        });
        return acc;
    }, {
        time: [],
        dataMap: { open: [], closed: [], waiting: [] }
    });

    // 将数据映射转换为目标格式
    return {
        time: intermediate.time,
        graphData: Object.entries(intermediate.dataMap).map(([label, data]) => ({ label, data }))
    };
}

// 调用示例
const result = transformData(inputData);
console.log(result);

扩展说明 #

如果后续需要新增图表指标，只需修改代码中的字段列表（targetFields或reduce里的字段数组）即可，无需大幅调整逻辑。

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