मल्टीलेवल ड्रॉपडाउन सूची कैसे बनाएं और सर्वर से आने वाले डेटा के साथ बांधें

15

मैं कोणीय के लिए बहुत नया हूं। मुझे कोणीय पर कुछ काम मिला है।

मुझे Jsonडेटा के लिए नेस्टेड ड्रॉपडाउन सूची को बांधने की आवश्यकता है जो कि रेस्ट एपि कहकर सर्वर से आ रही है।

डेटा की एक विशेषता है 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में स्थिर डेटा के साथ सभी उदाहरण मिले जो मेरे लिए जटिल थे।htmlCSS

मैं इसे गतिशील रूप से उपयोग करना चाहता हूं TypeScript। मैं इस पर काम कैसे शुरू कर सकता हूं।

html  angular  typescript 
— अरविंद चौरसिया
स्रोत
सबसे पहले, डेटा प्रारूप है XMLऔर नहीं JSON। क्या आपने जो भी कोशिश की है उसे भी जोड़ सकते हैं? हो सकता है अधिक जानकारी में आपके द्वारा अपनाए गए दृष्टिकोण।
— vatz88
@ vatz88 - हाँ यह xml है जो पोस्टमैन से चिपकाया गया है। मैंने htmlकोड की कोशिश की है जिसमें स्थिर नेस्टेड सूची है। मैं इसे संपादित करने का प्रयास करूंगा और Jsonडेटा पोस्ट करूंगा । आप वैसे नहीं हैं जैसे मैंने कोशिश की है :)
— अरविंद चौरसिया
आपको चिंता करने की ज़रूरत नहीं है कि आपने अब तक क्या कोडित किया है। दृष्टिकोण यह होगा - ts फ़ाइल में डेटा को हार्डकोड करें, html में आपको ड्रॉपडाउन को प्रस्तुत करने वाले डेटा के अनुसार बाइंडिंग बनाते हैं। एक बार जब वह तर्क सही हो जाता है, तो डेटा को गतिशील रूप से प्राप्त करने पर काम करें, और फिर बाध्यकारी के साथ कोणीय जादू करें।
— vatz88
@ vatz88 - मेरा स्थिर कोड htmlफ़ाइल में था । मुझे इसे शुरू करने का विचार है। आप मेरी मदद कर सकते हैं।
— अरविंद चौरसिया
@ArvindChourasiya LgLevel 1 के कई बच्चे हैं, LgLevel 2 के किस पोते की पहचान किस बच्चे से है?
— सतीश पाई

जवाबों:

4

यह एक नमूना कोडित है जिसे आपको अपने 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>

आपके सर्वर प्रतिक्रिया डेटा के अनुसार मॉडल डेटा व्यवस्थित करें। रिस्पॉन्स जोंस फॉर्मेट बदला ( __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" : []
  }
— Yaseer
स्रोत
क्या आप कृपया .html फ़ाइल भी पोस्ट कर सकते हैं।
— अरविंद चौरसिया
@ArvindChourasiya क्या आपको टैग ड्रॉपडाउन या बस ड्रॉपडाउन ( लिंक ) की आवश्यकता है?
— यशी
मुझे जरूरत है कि यह उपरोक्त लिंक से dolor विकल्प में दिख रहा है।
— अरविंद चौरसिया
@ArvindChourasiya मैं एचटीएमएल के साथ पोस्ट को अद्यतन
— Yaseer
मैं आपके कोड के साथ थोड़ा भ्रमित हूं। आप getDataकहीं भी उपयोग नहीं कर रहे हैं । क्या आप कृपया अपना कोड जाँच सकते हैं और उद्घाटन और समापन जोड़ सकते हैं।
— अरविंद चौरसिया
4

ऐसा लगता है कि आपके पास पहले से ही एक और जवाब है जो आपकी आवश्यकताओं को पूरा करता है। लेकिन इस समाधान के साथ आने में मुझे कुछ समय लगा। तो वैसे भी इसे पोस्ट करने का फैसला किया।

नीचे दिए गए कोड स्निपेट का उपयोग पेड़ का निर्माण करने के लिए किया जाता है, जैसे कि माता-पिता के पदानुक्रमित डेटा की संरचना:

  processData(data) {
    let locationData = data.ArrayOfLocationGroup.LocationGroup;
    let level0 = [];
    let tempMap = {};
    for (let i = 0; i < locationData.length; i++) {
      let currItem = this.getDataObject(locationData[i]);
      if (tempMap[currItem.id] == undefined) {
        tempMap[currItem.id] = currItem;
        if (tempMap[currItem.parentLocationGroup] == undefined) {
          tempMap[currItem.parentLocationGroup] = { children: [] };
        }
        tempMap[currItem.parentLocationGroup].children.push(currItem);
      } else {
        if (tempMap[currItem.id]) {
          currItem.children = tempMap[currItem.id].children;
        }
        tempMap[currItem.id] = currItem;
        if (tempMap[currItem.parentLocationGroup] == undefined) {
          tempMap[currItem.parentLocationGroup] = { children: [] };
        }
        tempMap[currItem.parentLocationGroup].children.push(currItem);
      }
      if (currItem.lgLevel == "0") {
        if (level0.indexOf(currItem) == -1) {
          level0.push(currItem);
        }
      }
    }
    this.levelData = level0;
  }

एकत्रित डेटा को एक dropdownघटक के इनपुट के रूप में पारित किया जाता है जो इसे एक बहुस्तरीय ड्रॉपडाउन मेनू के रूप में प्रस्तुत करता है।

यह समाधान निश्चित रूप से बच्चों के किसी भी स्तर के लिए काम करेगा। dropdownघटक जिस तरह से डेटा आपके आवश्यकताओं के अनुसार प्रदान की गई है परिवर्तित करने के लिए संशोधित किया जा सकता।

मैं ले लिया htmlऔर cssयहां से बहुस्तरीय लटकती मेनू के लिए:
https://phppot.com/css/multilevel-dropdown-menu-with-pure-css/
: कोड जब इस जवाब से बाहर क्लिक किया मेनू लटकती बंद करने के लिए
https: //stackoverflow.com/a/59234391/9262488

उम्मीद है कि आपके लिए यह उपयोगी रहे।

— NiK648
स्रोत
मैंने आपका कोड चेक कर लिया है। यह काम कर रहा है। उत्तर पोस्ट करने के लिए धन्यवाद। क्या आप मुझे बता सकते हैं कि आपको मेरा डेटा कैसे मिल रहा है। http अनुरोध के लिए (mocky.io)।
— अरविंद चौरसिया 11
Mocky मॉक रेस्ट एपी बनाने के लिए एक ऑनलाइन टूल है। मैंने आपके द्वारा पोस्ट किया गया डेटा लिया और इसका उपयोग करके नकली का उपयोग करके एक बाकी एपी बनाया।
— NiK648
1

ट्री कंपोनेंट क्यों न बनाएं और इसे रीसर्च करने के लिए इनपुट्स को न बांधें?

प्रस्तावित समाधान है

  • गहराई-अज्ञेयवादी - यह आपके डेटा ट्री में किसी भी स्तर के लिए काम करेगा (भले ही यह तदर्थ में बदलाव करता हो)
  • काफी कुशल - यह आपके डेटा को एकत्र करता है O(n)।

डेटा मॉडल को पहले डिज़ाइन करें - इसे ट्री-नोड संरचना होना चाहिए:

export interface GroupId { /* appropriate members... */ }

export interface ParentLocationGroup { /* other members... */ __text: string; }

export interface LgLevel { /* other members... */ __text: string; }

export interface DataModel {
  Id: string,
  Name: string,
  GroupId: GroupId,
  ParentLocationGroup: ParentLocationGroup,
  LgLevel: LgLevel,
  children: DataModel[]
}

फिर अपने डेटा को शीर्ष-स्तरीय घटक (या इससे भी बेहतर - अपनी डेटा सेवा में एकत्र करें); आपको पर्याप्त मात्रा में सार करने में सक्षम होना चाहिए:

// dropdown.component.ts

@Component({
  selector: 'app-dropdown',
  template: `
    <ul class="nav site-nav">
      <li class=flyout>
        <a href=#>Dropdown</a>
        <app-dynamic-flyout [data]="data"></app-dynamic-flyout>
      </li>
    </ul>
  `
})
export class DropdownComponent {

  data: DataModel[];

  constructor(dataService: YourDataService){

    let data;
    dataService.getYourData()
      .pipe(map(d => d.ArrayOfLocationGroup.LocationGroup)))
      // Make sure every item has the `children` array property initialized
      // since it does not come with your data
      .subscribe(d => data = d.map(i => ({...i, children: []})));

    // Create a lookup map for building the data tree
    let idMap = data.reduce((acc, curr) => ({...acc, [curr.Id]: curr}), {});
    this.data = data.reduce(
      (acc, curr) => curr.LgLevel.__text == 0 || !curr.ParentLocationGroup
        // Either the level is 0 or there is no parent group
        // (the logic is unclear here - even some of your lvl 0 nodes have a `ParentGroup`)
        // -> we assume this is a top-level node and put it to the accumulator
        ? [...acc, curr]
        // Otherwise push this node to an appropriate `children` array
        // and return the current accumulator
        : idMap[curr.ParentLocationGroup.__text].children.push(curr) && acc, 
      []
    );
  }
}

और आवर्तक गतिशील फ्लाईआउट घटक बनाएँ:

// dynamic-flyout.component.ts

@Component({
  selector: 'app-dynamic-flyout',
  template: `
    <ul *ngIf="!!data.length" class="flyout-content nav stacked">
      <li *ngFor="let item of data" [class.flyout-alt]="!!item.children.length">
        <a href=#>{{item.Name}}</a>
        <app-dynamic-flyout [data]="item.children"></app-dynamic-flyout>
      </li>
    </ul>
  `
})
export class DynamicFlyoutComponent {
  @Input() data: DataModel[];
}

समाधान का परीक्षण नहीं किया गया है, लेकिन यह आपको एक सही दिशा में इंगित करेगा ...

आशा है इससे थोडी मदद मिलेगी :-)

— Heehaaw
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.