I have the main three parameters that are important category, subcategory, and group
This is an array of objects and I want to change the format of this array
Like all data divide into category inside sub-category inside group wise data I want
const data =
[
{
"type": "checkbox",
"value": true,
"category": "id",
"subcategory": "id document 1",
"group": "group1"
},
{
"type": "radio",
"value": 2,
"category": "id",
"subcategory": "id document 2",
"group": "group2"
},
{
"type": "radio",
"value": 3,
"category": "id",
"subcategory": "id document 2",
"group": "group2"
},
{
"type": "string",
"value": "dfgdfg",
"category": "Services",
"subcategory": "Service A",
"group": "g1"
},
{
"type": "string",
"value": "fxs",
"category": "Services",
"subcategory": "Service A",
"group": "g1"
},
{
"type": "string",
"value": "3",
"category": "Services access",
"subcategory": "Service B",
"group": "g1"
},
{
"type": "string",
"value": "sgredfg25ghfghrt54645dfeh",
"category": "Services access",
"subcategory": "Service B",
"group": "g2"
},
{
"type": "string",
"value": "sgredfg25ghfghrt54645dfeh",
"category": "Services access",
"subcategory": "Service C",
"group": "g3"
}
]
The expected result looks like this
const data = [
{
"category": "id",
"subcategory": [
{
"subcategory_name": "id document 1",
"subcategory_data": [
{
"group": "group1",
"groupdata": [
{
"type": "checkbox",
"value": true,
"category": "id",
"subcategory": "id document 1",
"group": "group1"
}
]
}
]
},
{
"subcategory_name": "id document 2",
"subcategory_data": [
{
"group": "group1",
"groupdata": [
{
"type": "checkbox",
"value": true,
"category": "id",
"subcategory": "id document 2",
"group": "group1"
},
{
"type": "checkbox",
"value": true,
"category": "id",
"subcategory": "id document 2",
"group": "group1"
}
]
}
]
}
]
},
{
"category": "Services",
"subcategory": [
{
"subcategory_name": "Service B",
"subcategory_data": [
{
"group": "c1",
"groupdata": [
{
"type": "checkbox",
"value": true,
"category": "Services",
"subcategory": "Service B",
"group": "c1"
}
]
},
{
"group": "c2",
"groupdata": [
{
"type": "checkbox",
"value": true,
"category": "Services",
"subcategory": "Service B",
"group": "c2"
}
]
}
]
},
{
"subcategory_name": "Service C",
"subcategory_data": [
{
"group": "f1",
"groupdata": [
{
"type": "checkbox",
"value": true,
"category": "Services",
"subcategory": "Service C",
"group": "f1"
},
{
"type": "checkbox",
"value": true,
"category": "Services",
"subcategory": "Service C",
"group": "f1"
}
]
}
]
}
]
}
]
If the category match data push into the match subcategory if not then create a category for the same and if the subcategory match push into that one otherwise create a new one same as the group if the group match into subcategory then push otherwise create one
Like I want hierarchy like category => subcategory => group
And I try the this code
let finaldata = []
let flag1;
let aa = []
for (let i = 0; i < parseData.length; i ) {
if (i == 0) {
finaldata.push({ category: parseData[i].category, subcategory: [parseData[i]] })
flag1 = true
} else {
if (parseData[i - 1]?.category !== parseData[i].category) {
finaldata.push({ category: parseData[i].category, subcategory: [parseData[i]] })
} else {
aa = finaldata.map(x => x.category === parseData[i].category ? { ...x, subcategory: [...x.subcategory, parseData[i]] } : x);
}
}
if (!flag1) break;
}
CodePudding user response：
does this helps?
const data =
[
{
"type": "checkbox",
"value": true,
"category": "id",
"subcategory": "id document 1",
"group": "group1"
},
{
"type": "radio",
"value": 2,
"category": "id",
"subcategory": "id document 2",
"group": "group2"
},
{
"type": "radio",
"value": 3,
"category": "id",
"subcategory": "id document 2",
"group": "group2"
},
{
"type": "string",
"value": "dfgdfg",
"category": "Services",
"subcategory": "Service A",
"group": "g1"
},
{
"type": "string",
"value": "fxs",
"category": "Services",
"subcategory": "Service A",
"group": "g1"
},
{
"type": "string",
"value": "3",
"category": "Services access",
"subcategory": "Service B",
"group": "g1"
},
{
"type": "string",
"value": "sgredfg25ghfghrt54645dfeh",
"category": "Services access",
"subcategory": "Service B",
"group": "g2"
},
{
"type": "string",
"value": "sgredfg25ghfghrt54645dfeh",
"category": "Services access",
"subcategory": "Service C",
"group": "g3"
}
]
const result = data.reduce((p, c) => {
const i = p.findIndex(p => p.category === c.category)
if (i !== -1) {
const j = p[i].subcategory.findIndex(s => s.subcategory_name === c.subcategory);
if (j !== -1) {
const k = p[i].subcategory[j].subcategory_data.findIndex(sd => sd.group === c.group);
if (k !== -1) {
p[i].subcategory[j].subcategory_data[k].groupdata.push(c);
return p
}
p[i].subcategory[j].subcategory_data.push({
group: c.group,
groupdata: [
c
]
})
}
p[i].subcategory.push({
subcategory_name: c.subcategory,
subcategory_data: [
{
group: c.group,
groupdata: [
{
...c
}
]
}
]
})
return p
}
p.push({
category: c.category,
subcategory: [
{
subcategory_name: c.subcategory,
subcategory_data: [
{
group: c.group,
groupdata: [
c
]
}
]
}
]
})
return p;
}, []);
console.log(result);CodePudding user response：
Another approach to group items:
const data = [{"type":"checkbox","value":true,"category":"id","subcategory":"id document 1","group":"group1"},{"type":"radio","value":2,"category":"id","subcategory":"id document 2","group":"group2"},{"type":"radio","value":3,"category":"id","subcategory":"id document 2","group":"group2"},{"type":"string","value":"dfgdfg","category":"Services","subcategory":"Service A","group":"g1"},{"type":"string","value":"fxs","category":"Services","subcategory":"Service A","group":"g1"},{"type":"string","value":"3","category":"Services access","subcategory":"Service B","group":"g1"},{"type":"string","value":"sgredfg25ghfghrt54645dfeh","category":"Services access","subcategory":"Service B","group":"g2"},{"type":"string","value":"sgredfg25ghfghrt54645dfeh","category":"Services access","subcategory":"Service C","group":"g3"}];
const groupByToPairs = (items, key) => Object.entries(items.reduce((acc, item) => {
acc[item[key]] ??= [];
acc[item[key]].push(item);
return acc;
}, {}));
const makeGroups = (items) => groupByToPairs(items, 'group')
.map(([group, groupdata]) => ({ group, groupdata }));
const makeSubcategories = (items) => groupByToPairs(items, 'subcategory')
.map(([subcategory_name, items]) => ({ subcategory_name, subcategory_data: makeGroups(items) }));
const makeCategories = (items) => groupByToPairs(items, 'category')
.map(([category, items]) => ({ category, subcategory: makeSubcategories(items) }));
console.log(makeCategories(data));.as-console-wrapper { max-height: 100% !important; top: 0 }<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>