アービンドChourasiya:
私は角度に非常に新しいです。私は角にいくつかの仕事を持っています。
私はのためにネストされたドロップダウンリストをバインドする必要がJson
残りのAPIを呼び出すことにより、サーバから来ているデータ。
データは、一つの属性を持ってLgLevel
、グループの階層内のレベルを指定します。親が持っているだろうlevel=0
、即時にChild=1
、Grandchild=2
ようにと。Child
そして、Grandchild
しているParentLocationGroup
分野、番組内の親メニューは、子メニューが存在します。
これは私であるjson
データ。私は巨大なデータを持っているが、すべて表示されません。
{
"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"
}
}
私が開発し、それを試してみましたが、私はすべての例見つかったbootstrap
の静的データを持つhtml
ファイルと別のCSS
私に複雑になったファイルを。
私が使用して動的にそれをやってみたいですTypeScript
。どのように私はそれに取り組んで開始することができます。
Yaseen:
これは、あなたのJSONデータから、ネストされたレベルのデータごとに必要なコード化されたサンプルです。今、あなたはループのためにすることができますフォーマットされた DOMでJSONデータを使用したモデルデータを。私は、これはあなたが出て、マルチレベルのドロップダウンを作成するのに役立ちます願っています
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ファイル
<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>
サーバーの応答データごとにモデルデータを整理します。 レスポンスJSON形式に変更(__textへの#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" : []
}