将对象数组转换为按状态分组的嵌套数组求助

原始数据 #

let data = [
    {
        Name: 'House 1', 
        Details:[
            {Materials: 'Door', Status: 'Delivered'},
            {Materials: 'Closet', Status: 'Pending'},
            {Materials: 'Chair', Status: 'Pending'},
            {Materials: 'Kitchen', Status: 'Delivered'},
            {Materials: 'Door Knob', Status: 'Delivered'}
        ]
    },
    {
        Name: 'House 2', 
        Details:[
            {Materials: 'Cabinet', Status: 'Delivered'},
            {Materials: 'Kitchen', Status: 'Delivered'},
            {Materials: 'Door', Status: 'Ongoing'},
            {Materials: 'Chair', Status: 'Ongoing'},
            {Materials: 'Window', Status: 'Cancelled'}
        ]
    }
    // 其他房屋数据...
];

期望输出 #

最终需要得到以房屋为顶级项，每个房屋下按状态分组对应材料的嵌套结构（示例中的索引仅为控制台展示效果，实际输出为合法的数组/对象结构）：

[
    {
        "House 1": {
            "Delivered": ["Door", "Kitchen", "Door Knob"],
            "Pending": ["Closet", "Chair"]
        }
    },
    {
        "House 2": {
            "Cancelled": ["Window"],
            "Delivered": ["Cabinet", "Kitchen"],
            "Ongoing": ["Door", "Chair"]
        }
    }
]

实现代码 #

通过map+reduce组合可以完成多层分组，代码如下：

const result = data.map(house => {
    const groupedByStatus = house.Details.reduce((acc, item) => {
        // 若当前状态未在累加器中，初始化空数组
        if (!acc[item.Status]) {
            acc[item.Status] = [];
        }
        // 将材料推入对应状态的数组
        acc[item.Status].push(item.Materials);
        return acc;
    }, {});
    // 返回以房屋名称为键的对象
    return { [house.Name]: groupedByStatus };
});

console.log(result);

代码说明 #

1. 外层map遍历每个房屋对象，生成对应分组结构
2. 内层reduce处理单房屋的材料列表：
   • 初始化空对象作为累加器，用于存储状态-材料数组的映射
   • 遍历每个材料项，判断状态是否存在，不存在则创建对应数组
   • 将当前材料加入对应状态的数组中
3. 最终返回以房屋名称为键、状态分组结构为值的对象，组成结果数组

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