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.
JavaScript
x
199
199
1
[
2
{
3
"id": 1,
4
"slugId": 14,
5
"slugname": "CONGRESS HOLI",
6
"slugimage": "add_slug-1662283679686-280515336.png",
7
"catId": 43,
8
"Catname": "Festivals",
9
"Catimage": "add_cat-1662283486801-298957699.png",
10
"subcatId": 17,
11
"Subcatname": "Holi",
12
"Subcatimage": "add_sub_cat-1662283535813-230624577.png",
13
"status": "Y",
14
"createOn": "2022-09-22T09:28:58.000Z"
15
},
16
{
17
"id": 2,
18
"slugId": 16,
19
"slugname": "Businessman style",
20
"slugimage": "add_slug-1663051353073-877731686.png",
21
"catId": 43,
22
"Catname": "Festivals",
23
"Catimage": "add_cat-1662283486801-298957699.png",
24
"subcatId": 17,
25
"Subcatname": "Holi",
26
"Subcatimage": "add_sub_cat-1662283535813-230624577.png",
27
"status": "Y",
28
"createOn": "2022-09-22T09:28:58.000Z"
29
},
30
{
31
"id": 3,
32
"slugId": 18,
33
"slugname": " 5 years experience developer",
34
"slugimage": "add_slug-1663051690656-634079210.png",
35
"catId": 43,
36
"Catname": "Festivals",
37
"Catimage": "add_cat-1662283486801-298957699.png",
38
"subcatId": 17,
39
"Subcatname": "Holi",
40
"Subcatimage": "add_sub_cat-1662283535813-230624577.png",
41
"status": "Y",
42
"createOn": "2022-09-22T09:28:58.000Z"
43
},
44
{
45
"id": 4,
46
"slugId": 17,
47
"slugname": "Freshers celebration",
48
"slugimage": "add_slug-1663051623567-10970673.png",
49
"catId": 43,
50
"Catname": "Festivals",
51
"Catimage": "add_cat-1662283486801-298957699.png",
52
"subcatId": 17,
53
"Subcatname": "Holi",
54
"Subcatimage": "add_sub_cat-1662283535813-230624577.png",
55
"status": "Y",
56
"createOn": "2022-09-22T09:28:58.000Z"
57
},
58
{
59
"id": 5,
60
"slugId": 15,
61
"slugname": "BJP HOLI",
62
"slugimage": "add_slug-1662283691843-48171334.png",
63
"catId": 43,
64
"Catname": "Festivals",
65
"Catimage": "add_cat-1662283486801-298957699.png",
66
"subcatId": 17,
67
"Subcatname": "Holi",
68
"Subcatimage": "add_sub_cat-1662283535813-230624577.png",
69
"status": "Y",
70
"createOn": "2022-09-22T09:28:58.000Z"
71
},
72
{
73
"id": 6,
74
"slugId": 16,
75
"slugname": "Businessman style",
76
"slugimage": "add_slug-1663051353073-877731686.png",
77
"catId": 44,
78
"Catname": "International Programmer's day",
79
"Catimage": "add_cat-1663050093974-896633895.png",
80
"subcatId": 19,
81
"Subcatname": "Programmers celibration",
82
"Subcatimage": "add_sub_cat-1663050763025-692632444.png",
83
"status": "Y",
84
"createOn": "2022-09-22T09:29:17.000Z"
85
},
86
{
87
"id": 7,
88
"slugId": 17,
89
"slugname": "Freshers celebration",
90
"slugimage": "add_slug-1663051623567-10970673.png",
91
"catId": 44,
92
"Catname": "International Programmer's day",
93
"Catimage": "add_cat-1663050093974-896633895.png",
94
"subcatId": 19,
95
"Subcatname": "Programmers celibration",
96
"Subcatimage": "add_sub_cat-1663050763025-692632444.png",
97
"status": "Y",
98
"createOn": "2022-09-22T09:29:17.000Z"
99
},
100
{
101
"id": 8,
102
"slugId": 16,
103
"slugname": "Businessman style",
104
"slugimage": "add_slug-1663051353073-877731686.png",
105
"catId": 43,
106
"Catname": "Festivals",
107
"Catimage": "add_cat-1662283486801-298957699.png",
108
"subcatId": 18,
109
"Subcatname": "Businessman ",
110
"Subcatimage": "add_sub_cat-1663050461884-351806552.png",
111
"status": "Y",
112
"createOn": "2022-09-22T09:29:37.000Z"
113
},
114
{
115
"id": 11,
116
"slugId": 14,
117
"slugname": "CONGRESS HOLI",
118
"slugimage": "add_slug-1662283679686-280515336.png",
119
"catId": 43,
120
"Catname": "Festivals",
121
"Catimage": "add_cat-1662283486801-298957699.png",
122
"subcatId": 19,
123
"Subcatname": "Programmers celibration",
124
"Subcatimage": "add_sub_cat-1663050763025-692632444.png",
125
"status": "Y",
126
"createOn": "2022-09-22T09:44:04.000Z"
127
},
128
{
129
"id": 12,
130
"slugId": 15,
131
"slugname": "BJP HOLI",
132
"slugimage": "add_slug-1662283691843-48171334.png",
133
"catId": 43,
134
"Catname": "Festivals",
135
"Catimage": "add_cat-1662283486801-298957699.png",
136
"subcatId": 19,
137
"Subcatname": "Programmers celibration",
138
"Subcatimage": "add_sub_cat-1663050763025-692632444.png",
139
"status": "Y",
140
"createOn": "2022-09-22T09:44:04.000Z"
141
},
142
{
143
"id": 13,
144
"slugId": 16,
145
"slugname": "Businessman style",
146
"slugimage": "add_slug-1663051353073-877731686.png",
147
"catId": 43,
148
"Catname": "Festivals",
149
"Catimage": "add_cat-1662283486801-298957699.png",
150
"subcatId": 19,
151
"Subcatname": "Programmers celibration",
152
"Subcatimage": "add_sub_cat-1663050763025-692632444.png",
153
"status": "Y",
154
"createOn": "2022-09-22T09:44:04.000Z"
155
},
156
{
157
"id": 14,
158
"slugId": 14,
159
"slugname": "CONGRESS HOLI",
160
"slugimage": "add_slug-1662283679686-280515336.png",
161
"catId": 43,
162
"Catname": "Festivals",
163
"Catimage": "add_cat-1662283486801-298957699.png",
164
"subcatId": 20,
165
"Subcatname": "Developer celebration ",
166
"Subcatimage": "add_sub_cat-1663051456339-307987347.png",
167
"status": "Y",
168
"createOn": "2022-09-22T09:44:34.000Z"
169
},
170
{
171
"id": 15,
172
"slugId": 17,
173
"slugname": "Freshers celebration",
174
"slugimage": "add_slug-1663051623567-10970673.png",
175
"catId": 43,
176
"Catname": "Festivals",
177
"Catimage": "add_cat-1662283486801-298957699.png",
178
"subcatId": 20,
179
"Subcatname": "Developer celebration ",
180
"Subcatimage": "add_sub_cat-1663051456339-307987347.png",
181
"status": "Y",
182
"createOn": "2022-09-22T09:44:34.000Z"
183
},
184
{
185
"id": 16,
186
"slugId": 16,
187
"slugname": "Businessman style",
188
"slugimage": "add_slug-1663051353073-877731686.png",
189
"catId": 43,
190
"Catname": "Festivals",
191
"Catimage": "add_cat-1662283486801-298957699.png",
192
"subcatId": 20,
193
"Subcatname": "Developer celebration ",
194
"Subcatimage": "add_sub_cat-1663051456339-307987347.png",
195
"status": "Y",
196
"createOn": "2022-09-22T09:44:34.000Z"
197
}
198
]
199
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.
JavaScript
1
128
128
1
[
2
{
3
"id": 1,
4
"catId": 43,
5
"Catname": "Festivals",
6
"Catimage": "add_cat-1662283486801-298957699.png",
7
"status": "Y",
8
"createOn": "2022-09-22T09:28:58.000Z",
9
"subcat-details": [
10
{
11
"subcatId": 17,
12
"Subcatname": "Holi",
13
"Subcatimage": "add_sub_cat-1662283535813-230624577.png",
14
"slug-details": [
15
{
16
"slugId": 14,
17
"slugname": "CONGRESS HOLI",
18
"slugimage": "add_slug-1662283679686-280515336.png"
19
},
20
{
21
"slugId": 16,
22
"slugname": "Businessman style",
23
"slugimage": "add_slug-1663051353073-877731686.png"
24
},
25
{
26
"slugId": 18,
27
"slugname": " 5 years experience developer",
28
"slugimage": "add_slug-1663051690656-634079210.png"
29
},
30
{
31
"slugId": 17,
32
"slugname": "Freshers celebration",
33
"slugimage": "add_slug-1663051623567-10970673.png"
34
},
35
{
36
"slugId": 15,
37
"slugname": "BJP HOLI",
38
"slugimage": "add_slug-1662283691843-48171334.png"
39
}
40
]
41
},
42
{
43
"subcatId": 20,
44
"Subcatname": "Developer celebration ",
45
"Subcatimage": "add_sub_cat-1663051456339-307987347.png",
46
"slug-details": [
47
{
48
"slugId": 14,
49
"slugname": "CONGRESS HOLI",
50
"slugimage": "add_slug-1662283679686-280515336.png"
51
},
52
{
53
"slugId": 17,
54
"slugname": "Freshers celebration",
55
"slugimage": "add_slug-1663051623567-10970673.png"
56
},
57
{
58
"slugId": 16,
59
"slugname": "Businessman style",
60
"slugimage": "add_slug-1663051353073-877731686.png"
61
}
62
]
63
},
64
{
65
"subcatId": 18,
66
"Subcatname": "Businessman ",
67
"Subcatimage": "add_sub_cat-1663050461884-351806552.png",
68
"slug-details": [
69
{
70
"slugId": 16,
71
"slugname": "Businessman style",
72
"slugimage": "add_slug-1663051353073-877731686.png"
73
}
74
]
75
},
76
{
77
"subcatId": 19,
78
"Subcatname": "Programmers celibration",
79
"Subcatimage": "add_sub_cat-1663050763025-692632444.png",
80
"slug-details": [
81
{
82
"slugId": 14,
83
"slugname": "CONGRESS HOLI",
84
"slugimage": "add_slug-1662283679686-280515336.png"
85
},
86
{
87
"slugId": 15,
88
"slugname": "BJP HOLI",
89
"slugimage": "add_slug-1662283691843-48171334.png"
90
},
91
{
92
"slugId": 16,
93
"slugname": "Businessman style",
94
"slugimage": "add_slug-1663051353073-877731686.png"
95
}
96
]
97
}
98
]
99
},
100
{
101
"id": 6,
102
"catId": 44,
103
"Catname": "International Programmer's day",
104
"Catimage": "add_cat-1663050093974-896633895.png",
105
"status": "Y",
106
"createOn": "2022-09-22T09:29:17.000Z",
107
"subcat-details": [
108
{
109
"subcatId": 19,
110
"Subcatname": "Programmers celibration",
111
"Subcatimage": "add_sub_cat-1663050763025-692632444.png",
112
"slug-details": [
113
{
114
"slugId": 16,
115
"slugname": "Businessman style",
116
"slugimage": "add_slug-1663051353073-877731686.png"
117
},
118
{
119
"slugId": 17,
120
"slugname": "Freshers celebration",
121
"slugimage": "add_slug-1663051623567-10970673.png"
122
}
123
]
124
}
125
]
126
}
127
]
128
Advertisement
Answer
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.
JavaScript
1
36
36
1
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"}];
2
3
var grouped = Object.values(input.reduce(function(agg,item) {
4
5
agg[item.catId] ??= {
6
id: item.id,
7
catId: item.catId,
8
Catname: item.Catname,
9
status: item.status,
10
createOn: item.createOn,
11
"subcat-details": {}
12
}
13
14
agg[item.catId]["subcat-details"][item.subcatId] ??= {
15
subcatId: item.subcatId,
16
Subcatname: item.Subcatname,
17
Subcatimage: item.Subcatimage,
18
"slug-details": []
19
}
20
21
agg[item.catId]["subcat-details"][item.subcatId]["slug-details"].push({
22
slugId: item.slugId,
23
slugname: item.slugname,
24
slugimage: item.slugimage,
25
})
26
27
return agg;
28
}, {}));
29
30
var result = grouped.map(function(item) {
31
item["subcat-details"] = Object.values(item["subcat-details"])
32
return item;
33
})
34
35
36
console.log(result)
JavaScript
1
1
1
.as-console-wrapper {max-height: 100% !important}