I am very new to Angular. I have got some work on Angular.
I need to bind Nested dropdown list for Json
data which is coming from server by calling Rest Api.
Data has one attribute LgLevel
, Specifies the level in the hierarchy of the group. Parent will have level=0
, Immediate Child=1
, Grandchild=2
and so on. Child
and Grandchild
has ParentLocationGroup
field, which shows inside which parent menu, child menu will be there.
This is my json
data. I have huge data but not showing all.
{
"ArrayOfLocationGroup": {
"LocationGroup": [
{
"Id": "628",
"Name": "TEST1",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources"
},
"ParentLocationGroup": {
"_uuid": "bdce4396-9c60-4831-90f2-6f793becb362",
"__text": "570"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "0"
}
},
{
"Id": "630",
"Name": "TEST2",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "PAM-TEST"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
},
{
"Id": "631",
"Name": "TEST3",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "PAA-TEST"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
},
{
"Id": "697",
"Name": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "TEST4"
},
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "PAE-TEST"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
},
{
"Id": "700",
"Name": "TEST5",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "cuba"
},
"ParentLocationGroup": {
"_uuid": "704af4cf-9feb-4f1b-aa00-d1c7926f7901",
"__text": "694"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "2"
}
},
{
"Id": "706",
"Name": "TEST5",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "VOIP-Test"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
},
{
"Id": "718",
"Name": "TEST7",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
},
{
"Id": "719",
"Name": "TEST8",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "MEM_RS"
},
"ParentLocationGroup": {
"_uuid": "52073e2b-48b5-41a9-9c2b-d793835cf285",
"__text": "718"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "2"
}
},
{
"Id": "752",
"Name": "TEST9",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "ELDIT"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
},
{
"Id": "753",
"Name": "TEST10",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "GXYA"
},
"ParentLocationGroup": {
"_uuid": "52073e2b-48b5-41a9-9c2b-d793835cf285",
"__text": "718"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "2"
}
},
{
"Id": "760",
"Name": "TEST11",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "STAGE2"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
},
{
"Id": "761",
"Name": "TEST12",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "INIT"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
},
{
"Id": "762",
"Name": "TEST13",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "USIT"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
}
],
"_xmlns:xsd": "http://www.w3.org/2001/XMLSchema"
}
}
I have tried it to develop but I found all examples of bootstrap
with static data in html
file and separate CSS
file which was complicated to me.
I want to do it dynamically using TypeScript
. How can I start working on it.
This is a sample coded which you need as per nested level data from your json data. Now you can for loop the formatted json data in the DOM using model data. I hope this will help you out create a multi-level drop-down
groupBy(xs, key) {
return xs.reduce(function (rv, x) {
(rv[x[key]] = rv[x[key]] || []).push(x);
return rv;
}, {});
}
var model;
getData() {
var sampleData = {
"ArrayOfLocationGroup": {
"LocationGroup": [
...
...//Server response data
],
"_xmlns:xsd": "http://www.w3.org/2001/XMLSchema"
}
}
var list = this.sampleData["ArrayOfLocationGroup"]["LocationGroup"];
var formattedList = [];
list.forEach(element => {
var obj = { //Make sure your server response data to like this structure
"Id": element.Id,
"Name": element.Name,
"GroupId": element.GroupId.__text,
"ParentLocationGroup": element.ParentLocationGroup.__text,
"LgLevel": element.LgLevel.__text,
"Child" : []
}
formattedList.push(obj);
});
var groupDataList = this.groupBy(formattedList, "LgLevel");
var parents = groupDataList[0];
var child = groupDataList[1];
var childOfChild = groupDataList[2];
child.forEach(c => {
c.Child = childOfChild.filter(x => x.ParentLocationGroup == c.Id);
})
parents.forEach(p => {
p.Child = child.filter(x => x.ParentLocationGroup == p.Id);
})
this.model = parents;
}
Html File
<ul class="nav site-nav">
<li class=flyout>
<a href=#>Dropdown</a>
<!-- Flyout -->
<ul class="flyout-content nav stacked">
<li *ngFor="let parent of model" [class.flyout-alt]="parent.Child.length > 0"><a href=#>{{parent.Name}}</a>
<ul *ngIf="parent.Child.length > 0" class="flyout-content nav stacked">
<li *ngFor="let c of parent.Child" [class.flyout-alt]="c.Child.length > 0"><a href=#>{{c.Name}}</a>
<ul *ngIf="c.Child.length > 0" class="flyout-content nav stacked">
<li *ngFor="let cc of c.Child" [class.flyout-alt]="cc.Child.length > 0"><a href=#>{{cc.Name}}</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
As per your server response data organize the model data. Response json format changed (__text to #text)
var obj = {
"Id": element.Id,
"Name": element.Name && element.Name.#text ? element.Name.#text : element.Name,
"GroupId": element.GroupId && element.GroupId.#text ? element.GroupId.#text : element.GroupId,
"ParentLocationGroup": element.ParentLocationGroup && element.ParentLocationGroup.#text ? element.ParentLocationGroup.#text : element.ParentLocationGroup,
"LgLevel": element.LgLevel && element.LgLevel.#text ? element.LgLevel.#text : element.LgLevel,
"Child" : []
}