Group by in jason objects in multiple keys

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

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};

}

}

executing multiple asynchronus call one after anothe in sharepoint