How to merge same type of array of object value in javascript

Question

I am getting this data from API and I want to change the same type of array of object in it in this form as given below Anwser.

[
    {
        "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"
    }
]

It stores multiple values in a single variable. The object can contain like a catid, catimage, etc. Actually, I hold the same object of the data in the single objects define in the description. So, help me everyone can solve this problem. please solve this problem.

[
    {
        "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"
                    }
                ]
            }
        ]
    }
]

Does this answer your question? [How can I group an array of objects by key?](https://stackoverflow.com/questions/40774697/how-can-i-group-an-array-of-objects-by-key) — pilchard, Oct 04 '22 at 08:24
Yes but there's 2 levels grouping, though it is basically same idea. — IT goldman, Oct 04 '22 at 08:58
There are two level duplicates (I’ve written some myself), but it’s just a nesting of the flagged duplicate — pilchard, Oct 04 '22 at 10:03

IT goldman · Accepted Answer · 2022-10-07T14:52:33.223

This iteration will group each thing to group (using reduce or whatever - as long as it's a loop) then extract values from it as array.

var input = [{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"}];

var grouped = Object.values(input.reduce(function(agg,item) {

  agg[item.catId] ??=  {
    id: item.id,
    catId: item.catId,
    Catname: item.Catname,
    status: item.status,
    createOn: item.createOn,
    "subcat-details": {}
  }
  
  agg[item.catId]["subcat-details"][item.subcatId] ??= {
    subcatId: item.subcatId,
    Subcatname: item.Subcatname,
    Subcatimage: item.Subcatimage,
    "slug-details": []
  }
  
  agg[item.catId]["subcat-details"][item.subcatId]["slug-details"].push({
    slugId: item.slugId,
    slugname: item.slugname,
    slugimage: item.slugimage,
  })
  
  return agg;
}, {}));

var result = grouped.map(function(item) {
  item["subcat-details"] = Object.values(item["subcat-details"])
  return item;
})


console.log(result)

.as-console-wrapper {max-height: 100% !important}

How to merge same type of array of object value in javascript

1 Answers1