如何在JavaScript中合并同类型对象数组的重复数据

问题描述 #

我从API获取到如下扁平结构的对象数组：

[{"id":1,"slugId":14,"slugname":"CONGRESS HOLI","slugimage":"add_slug-1662283679686-280515336.png","catId":43,"Catname":"Festivals","Catimage":"add_cat-1662283486801-298957699.png","subcatId":17,"Subcatname":"Holi","Subcatimage":"add_sub_cat-1662283535813-230624577.png","status":"Y","createOn":"2022-09-22T09:28:58.000Z"},{"id":2,"slugId":16,"slugname":"Businessman style","slugimage":"add_slug-1663051353073-877731686.png","catId":43,"Catname":"Festivals","Catimage":"add_cat-1662283486801-298957699.png","subcatId":17,"Subcatname":"Holi","Subcatimage":"add_sub_cat-1662283535813-230624577.png","status":"Y","createOn":"2022-09-22T09:28:58.000Z"},{"id":3,"slugId":18,"slugname":" 5 years experience developer","slugimage":"add_slug-1663051690656-634079210.png","catId":43,"Catname":"Festivals","Catimage":"add_cat-1662283486801-298957699.png","subcatId":17,"Subcatname":"Holi","Subcatimage":"add_sub_cat-1662283535813-230624577.png","status":"Y","createOn":"2022-09-22T09:28:58.000Z"},{"id":4,"slugId":17,"slugname":"Freshers celebration","slugimage":"add_slug-1663051623567-10970673.png","catId":43,"Catname":"Festivals","Catimage":"add_cat-1662283486801-298957699.png","subcatId":17,"Subcatname":"Holi","Subcatimage":"add_sub_cat-1662283535813-230624577.png","status":"Y","createOn":"2022-09-22T09:28:58.000Z"},{"id":5,"slugId":15,"slugname":"BJP HOLI","slugimage":"add_slug-1662283691843-48171334.png","catId":43,"Catname":"Festivals","Catimage":"add_cat-1662283486801-298957699.png","subcatId":17,"Subcatname":"Holi","Subcatimage":"add_sub_cat-1662283535813-230624577.png","status":"Y","createOn":"2022-09-22T09:28:58.000Z"},{"id":6,"slugId":16,"slugname":"Businessman style","slugimage":"add_slug-1663051353073-877731686.png","catId":44,"Catname":"International Programmer's day","Catimage":"add_cat-1663050093974-896633895.png","subcatId":19,"Subcatname":"Programmers celibration","Subcatimage":"add_sub_cat-1663050763025-692632444.png","status":"Y","createOn":"2022-09-22T09:29:17.000Z"},{"id":7,"slugId":17,"slugname":"Freshers celebration","slugimage":"add_slug-1663051623567-10970673.png","catId":44,"Catname":"International Programmer's day","Catimage":"add_cat-1663050093974-896633895.png","subcatId":19,"Subcatname":"Programmers celibration","Subcatimage":"add_sub_cat-1663050763025-692632444.png","status":"Y","createOn":"2022-09-22T09:29:17.000Z"},{"id":8,"slugId":16,"slugname":"Businessman style","slugimage":"add_slug-1663051353073-877731686.png","catId":43,"Catname":"Festivals","Catimage":"add_cat-1662283486801-298957699.png","subcatId":18,"Subcatname":"Businessman ","Subcatimage":"add_sub_cat-1663050461884-351806552.png","status":"Y","createOn":"2022-09-22T09:29:37.000Z"},{"id":11,"slugId":14,"slugname":"CONGRESS HOLI","slugimage":"add_slug-1662283679686-280515336.png","catId":43,"Catname":"Festivals","Catimage":"add_cat-1662283486801-298957699.png","subcatId":19,"Subcatname":"Programmers celibration","Subcatimage":"add_sub_cat-1663050763025-692632444.png","status":"Y","createOn":"2022-09-22T09:44:04.000Z"},{"id":12,"slugId":15,"slugname":"BJP HOLI","slugimage":"add_slug-1662283691843-48171334.png","catId":43,"Catname":"Festivals","Catimage":"add_cat-1662283486801-298957699.png","subcatId":19,"Subcatname":"Programmers celibration","Subcatimage":"add_sub_cat-1663050763025-692632444.png","status":"Y","createOn":"2022-09-22T09:44:04.000Z"},{"id":13,"slugId":16,"slugname":"Businessman style","slugimage":"add_slug-1663051353073-877731686.png","catId":43,"Catname":"Festivals","Catimage":"add_cat-1662283486801-298957699.png","subcatId":19,"Subcatname":"Programmers celibration","Subcatimage":"add_sub_cat-1663050763025-692632444.png","status":"Y","createOn":"2022-09-22T09:44:04.000Z"},{"id":14,"slugId":14,"slugname":"CONGRESS HOLI","slugimage":"add_slug-1662283679686-280515336.png","catId":43,"Catname":"Festivals","Catimage":"add_cat-1662283486801-298957699.png","subcatId":20,"Subcatname":"Developer celebration ","Subcatimage":"add_sub_cat-1663051456339-307987347.png","status":"Y","createOn":"2022-09-22T09:44:34.000Z"},{"id":15,"slugId":17,"slugname":"Freshers celebration","slugimage":"add_slug-1663051623567-10970673.png","catId":43,"Catname":"Festivals","Catimage":"add_cat-1662283486801-298957699.png","subcatId":20,"Subcatname":"Developer celebration ","Subcatimage":"add_sub_cat-1663051456339-307987347.png","status":"Y","createOn":"2022-09-22T09:44:34.000Z"},{"id":16,"slugId":16,"slugname":"Businessman style","slugimage":"add_slug-1663051353073-877731686.png","catId":43,"Catname":"Festivals","Catimage":"add_cat-1662283486801-298957699.png","subcatId":20,"Subcatname":"Developer celebration ","Subcatimage":"add_sub_cat-1663051456339-307987347.png","status":"Y","createOn":"2022-09-22T09:44:34.000Z"}]

该数组将分类（cat）、子分类（subcat）、标签（slug）的信息存储在单个对象中，包含catId、Catimage、subcatId、slugId等字段。需要将其转换为如下嵌套层级结构，把相同分类的数据合并到对应层级：

[{"id":1,"catId":43,"Catname":"Festivals","Catimage":"add_cat-1662283486801-298957699.png","status":"Y","createOn":"2022-09-22T09:28:58.000Z","subcat-details":[{"subcatId":17,"Subcatname":"Holi","Subcatimage":"add_sub_cat-1662283535813-230624577.png","slug-details":[{"slugId":14,"slugname":"CONGRESS HOLI","slugimage":"add_slug-1662283679686-280515336.png"},{"slugId":16,"slugname":"Businessman style","slugimage":"add_slug-1663051353073-877731686.png"},{"slugId":18,"slugname":" 5 years experience developer","slugimage":"add_slug-1663051690656-634079210.png"},{"slugId":17,"slugname":"Freshers celebration","slugimage":"add_slug-1663051623567-10970673.png"},{"slugId":15,"slugname":"BJP HOLI","slugimage":"add_slug-1662283691843-48171334.png"}]},{"subcatId":20,"Subcatname":"Developer celebration ","Subcatimage":"add_sub_cat-1663051456339-307987347.png","slug-details":[{"slugId":14,"slugname":"CONGRESS HOLI","slugimage":"add_slug-1662283679686-280515336.png"},{"slugId":17,"slugname":"Freshers celebration","slugimage":"add_slug-1663051623567-10970673.png"},{"slugId":16,"slugname":"Businessman style","slugimage":"add_slug-1663051353073-877731686.png"}]},{"subcatId":18,"Subcatname":"Businessman ","Subcatimage":"add_sub_cat-1663050461884-351806552.png","slug-details":[{"slugId":16,"slugname":"Businessman style","slugimage":"add_slug-1663051353073-877731686.png"}]},{"subcatId":19,"Subcatname":"Programmers celibration","Subcatimage":"add_sub_cat-1663050763025-692632444.png","slug-details":[{"slugId":14,"slugname":"CONGRESS HOLI","slugimage":"add_slug-1662283679686-280515336.png"},{"slugId":15,"slugname":"BJP HOLI","slugimage":"add_slug-1662283691843-48171334.png"},{"slugId":16,"slugname":"Businessman style","slugimage":"add_slug-1663051353073-877731686.png"}]}]},{"id":6,"catId":44,"Catname":"International Programmer's day","Catimage":"add_cat-1663050093974-896633895.png","status":"Y","createOn":"2022-09-22T09:29:17.000Z","subcat-details":[{"subcatId":19,"Subcatname":"Programmers celibration","Subcatimage":"add_sub_cat-1663050763025-692632444.png","slug-details":[{"slugId":16,"slugname":"Businessman style","slugimage":"add_slug-1663051353073-877731686.png"},{"slugId":17,"slugname":"Freshers celebration","slugimage":"add_slug-1663051623567-10970673.png"}]}]}]

解决方案 #

通过遍历扁平数组，利用对象作为映射表跟踪已创建的分类和子分类，逐层构建嵌套结构，代码如下：

function transformFlatData(flatData) {
  // 用对象存储已处理的分类，key为catId
  const categoryMap = {};

  flatData.forEach(item => {
    // 1. 处理分类层级
    let category = categoryMap[item.catId];
    if (!category) {
      // 创建新的分类对象，提取分类相关字段
      category = {
        id: item.id,
        catId: item.catId,
        Catname: item.Catname,
        Catimage: item.Catimage,
        status: item.status,
        createOn: item.createOn,
        'subcat-details': []
      };
      categoryMap[item.catId] = category;
    }

    // 2. 处理子分类层级
    let subcategory = category['subcat-details'].find(sc => sc.subcatId === item.subcatId);
    if (!subcategory) {
      // 创建新的子分类对象，提取子分类相关字段
      subcategory = {
        subcatId: item.subcatId,
        Subcatname: item.Subcatname,
        Subcatimage: item.Subcatimage,
        'slug-details': []
      };
      category['subcat-details'].push(subcategory);
    }

    // 3. 处理标签层级，检查是否已存在相同slugId的标签（避免重复）
    const existingSlug = subcategory['slug-details'].find(s => s.slugId === item.slugId);
    if (!existingSlug) {
      // 创建新的标签对象，提取标签相关字段
      const slug = {
        slugId: item.slugId,
        slugname: item.slugname,
        slugimage: item.slugimage
      };
      subcategory['slug-details'].push(slug);
    }