如何在PHP+Ionic中按Hari字段分组数据库返回的JSON数组

嘿，我来帮你搞定这个分组需求！你需要把从PHP接口返回的课程数据，按Hari（星期）字段进行分组，将同一天的课程归到对应对象的Kuliah数组里对吧？在Ionic的TypeScript代码里，我们可以通过两种方式实现这个功能，下面给你详细说明：

方法一：普通循环+对象映射（直观易懂） #

这种方式逻辑清晰，适合刚接触TypeScript的同学理解：

async loadKelas() { 
    return new Promise(resolve => { 
        let body = { aksi: 'load_Kelas', }; 
        this.accsPrvds.postData(body, 'proses_api.php').subscribe((kelas: any) => { 
            // 创建临时映射对象，用来存储每个Hari对应的课程数组
            const hariMap: { [key: string]: any[] } = {};
            
            // 遍历接口返回的每一条课程数据
            for (let kelaskuliah of kelas.result) {
                const currentHari = kelaskuliah.hari;
                // 如果当前Hari还没在映射里，先初始化一个空数组
                if (!hariMap[currentHari]) {
                    hariMap[currentHari] = [];
                }
                // 去掉课程对象里的hari字段（可选，若不需要重复字段则用这行）
                const { hari: _, ...kuliahDetails } = kelaskuliah;
                // 将课程信息添加到对应Hari的数组中
                hariMap[currentHari].push(kuliahDetails);
            }
            
            // 把映射对象转换成你需要的最终数组格式
            this.datakelas = Object.entries(hariMap).map(([hari, kuliahList]) => ({
                Hari: hari,
                Kuliah: kuliahList
            }));
            
            resolve(true);
            console.log(this.datakelas); // 现在输出的就是目标格式啦
        }); 
    }); 
}

方法二：使用Array.reduce()（简洁高效） #

如果你熟悉数组的高阶方法，用reduce可以更简洁地完成分组：

async loadKelas() { 
    return new Promise(resolve => { 
        let body = { aksi: 'load_Kelas', }; 
        this.accsPrvds.postData(body, 'proses_api.php').subscribe((kelas: any) => { 
            // 用reduce直接完成分组和格式转换
            this.datakelas = Object.values(
                kelas.result.reduce((groupedData: any, currentClass: any) => {
                    const hari = currentClass.hari;
                    // 若当前Hari未分组，创建新的分组对象
                    if (!groupedData[hari]) {
                        groupedData[hari] = { Hari: hari, Kuliah: [] };
                    }
                    // 移除重复的hari字段，添加到对应分组的Kuliah数组
                    const { hari: _, ...classDetails } = currentClass;
                    groupedData[hari].Kuliah.push(classDetails);
                    return groupedData;
                }, {}) // 初始值为空对象
            );
            
            resolve(true);
            console.log(this.datakelas);
        }); 
    }); 
}

小说明： #

• 代码里的const { hari: _, ...kuliahDetails } = kelaskuliah是用来移除课程对象里重复的hari字段，如果你的需求里需要保留这个字段，直接把这行换成hariMap[currentHari].push(kelaskuliah)即可。
• 两种方法最终都会得到你想要的分组格式，你可以根据自己的习惯选择其中一种。

内容的提问来源于stack exchange，提问作者Dzurrahman Roki Muhammad Ibrah