Recently I was involved in a task where I have to group a array of Json object on multiple keys and in hierarchical manner that too without using any third party framework.
After some search I found a way to group json on single key. So, I used the same method in a nested way to group by array of object in multiple keys and in hierarchical manner.
data=[{AreaType:Sales, AreaTypeGroup:Total;StoreArea ,CategoryName:Kids,Title:KidsArea},
{AreaType:Sales, AreaTypeGroup:Total;StoreArea ,CategoryName:Kids,Title:KidsArea}, {AreaType:Service,AreaTypeGroup:Total;StoreArea,CategoryName:Service,Title:ServiceArea},
{AreaType:Sales, AreaTypeGroup:Total;StoreArea ,CategoryName:Kids,Title:KidsArea},
{AreaType:Sales, AreaTypeGroup:Total;StoreArea ,CategoryName:Men,Title:MensJeans},
{ AreaType:Sales, AreaTypeGroup:Total; ,CategoryName:Various,Title:laundry},
{ AreaType:Sales, AreaTypeGroup:Total;StoreArea ,CategoryName:Ladies,Title:Tops},
{ AreaType:Sales, AreaTypeGroup:Total;StoreArea ,CategoryName:Men,Title:MensShirt}
]
So, To transform this data in grouped and hierarchical manner like
First
After some search I found a way to group json on single key. So, I used the same method in a nested way to group by array of object in multiple keys and in hierarchical manner.
data=[{AreaType:Sales, AreaTypeGroup:Total;StoreArea ,CategoryName:Kids,Title:KidsArea},
{AreaType:Sales, AreaTypeGroup:Total;StoreArea ,CategoryName:Kids,Title:KidsArea}, {AreaType:Service,AreaTypeGroup:Total;StoreArea,CategoryName:Service,Title:ServiceArea},
{AreaType:Sales, AreaTypeGroup:Total;StoreArea ,CategoryName:Kids,Title:KidsArea},
{AreaType:Sales, AreaTypeGroup:Total;StoreArea ,CategoryName:Men,Title:MensJeans},
{ AreaType:Sales, AreaTypeGroup:Total; ,CategoryName:Various,Title:laundry},
{ AreaType:Sales, AreaTypeGroup:Total;StoreArea ,CategoryName:Ladies,Title:Tops},
{ AreaType:Sales, AreaTypeGroup:Total;StoreArea ,CategoryName:Men,Title:MensShirt}
]
So, To transform this data in grouped and hierarchical manner like
First
All AreaTypeGroups ->AreaTypes that fall under that
AreaTypeGroup-> All different categories which fall under AreaType like
ladies and men and kids-> Titles
Ex:
Steps:
1. Group your Jason objects in a single and highest key
var gropedAreaTypegrope={};
for(var i = 0; i < data.length; i++) {
var gropeAreaTypegrope = data[i];
if(typeof gropedAreaTypegrope[gropeAreaTypegrope.AreaTypeGroup] === "undefined")
{
gropedAreaTypegrope[gropeAreaTypegrope.AreaTypeGroup] = [];
}
gropedAreaTypegrope[gropeAreaTypegrope.AreaTypeGroup].push({
Title:gropeAreaTypegrope.Title,
CategoryName:gropeAreaTypegrope.CategoryName,
AreaType:gropeAreaTypegrope.AreaType
});
}
console.log(gropedAreaTypegrope);
-After this you will have a single jason object gropedAreaTypegrope with data in grouped by "AreaTypeGroup".
Step 2: loop though gropedAreaTypegrope object for every key and further grouped them on second highest key and after grouping put this grouped object under first grouped object. and so on for each keys.
for (var key in gropedAreaTypegrope)
{
if (gropedAreaTypegrope.hasOwnProperty(key))
{
var areaType =gropedAreaTypegrope[key];
//group by areaType
var gropedAreaType={};
for(var i = 0; i < areaType.length; i++) {
var gropeAreaType = areaType[i];
if(typeof gropedAreaType[gropeAreaType.AreaType] === "undefined") {
gropedAreaType[gropeAreaType.AreaType] = [];
}
gropedAreaType[gropeAreaType.AreaType].push({
Title:gropeAreaType.Title,
CategoryName:gropeAreaType.CategoryName,
Text:gropeAreaType.AreaType
});
}
//area type group ends here
//loop though gropedAreaType jason aray
for (var catKey in gropedAreaType)
{
if (gropedAreaType.hasOwnProperty(catKey))
{
var category =gropedAreaType[catKey];
var gropedCategory={};
for(var i = 0; i < category.length; i++) {
var gropeCategory = category[i];
if(typeof gropedCategory[gropeCategory.CategoryName] === "undefined") {
gropedCategory[gropeCategory.CategoryName] = [];
}
gropedCategory[gropeCategory.CategoryName].push({
Text:gropeCategory.Title
});
}
gropedAreaType[catKey]= gropedCategory;
}
}
gropedAreaTypegrope[key]={AreaType:gropedAreaType};
}
}