How to display multi dimensional array into the multiple dropdown menu?

Question

I am working in multiple dropdown menu. I have created an array from php and it looks like this:

https://api.myjson.com/bins/1emzic

Now from this json I want to display 4 dropdown menu.

In the first drop down I need to display

"FS A", "FS MT" and "FS OTHER"

Based on the first selection I need to display its related data in second third and fourth and so on as I add in my data.

This is what I need to bind

<select [(ngModel)]="first" id="first">
   <option value="" disabled selected>select a category</option>
   <option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
 </select>
<br>
 <select [(ngModel)]="second" id="second">
   <option value="" disabled selected>select a category</option>
   <option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
 </select>
<br>

 <select [(ngModel)]="third" id="third">
   <option value="" disabled selected>select a category</option>
   <option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
 </select>

<br>

 <select [(ngModel)]="four" id="four">
   <option value="" disabled selected>select a category</option>
   <option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
 </select>

Here is my json data

{"FS A":{"BKK":{"BKK PULL":{"BKK SR1":[]},"BKK PUSH":{"BKK BCDE1":[],"BKK BAKE SE1":[]}},"RSM2":{"CHIANGMAI":{"CMI WS SE1":[],"CMI WS SE2":[]},"NORTH":{"NO1 SE1":[],"NO2 SEPLUS1":[],"NO3 SE1":[]},"ASM HOTEL BKK":{"BKK HO 5STARS1":[],"BKK HO SR1":[],"BKK HO SR2":[],"BKK HO SR3":[]}}},"FS MT":{"FSR1":{"FSA1":{"FS MAKRO":[]}},"FSR2":{"FSA2":{"FS FOODLAND":[],"FS GAS STATION":[],"FS VILLA MARKET JP":[],"SIAM FOODSERVICE":[]}},"FS LOCAL EXP":{"FS LOCAL EXP BKK":{"FS LOCAL EXP BKK":[]},"FS LOCAL EXP CD":{"FS LOCAL EXP CD":[]},"FS LOCAL EXP MM":{"FS LOCAL EXP MM":[]}}},"FS OTHER":{"FS OTHER":{"FS OTHER":{"FS OTHER":[]}}}}

Can anybody help me in this?

Here I am working:

https://stackblitz.com/edit/angular-dsylxi

Just code · Accepted Answer · 2018-12-28 04:35:59Z

1

You need to define the dependency on each other and based on that you can fill the models and its options. I will go for generic solution which can be applied with one function and works for all the drop-downs.

This are the model variables you need

 wholeList:any = [];
  first:any = [];
  second:any = [];
  third:any = [];
  four:any = [];
  firstModel = ''
  secondModel = ''
  thirdModel = ''
  fourModel = ''

Then first you fill the first dropdown

this.testService.get_data().subscribe(
      res => { 
        this.wholeList = res;
        this.first = Object.keys(this.wholeList).map(a=> a);
        console.log("res", this.first);
      },
      err => {
        console.log(err);
      }
    )

Then in the view you need to fire a dependency which should look like this, note that I am defining dependency ChangeDropdown(this.wholeList[firstModel],'second')"

<select [(ngModel)]="firstModel" id="first"  (ngModelChange)="ChangeDropdown(this.wholeList[firstModel],'second')">
   <option value="" disabled selected>select a category</option>
   <option *ngFor="let item of first" [value]="item">{{item}}</option>
 </select>
<br>
 <select [(ngModel)]="secondModel" id="second" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel][secondModel],'third')">
   <option value="" disabled selected>select a category</option>
   <option *ngFor="let item of second" [value]="item">{{item}}</option>
 </select>
<br>

 <select [(ngModel)]="thirdModel" id="third" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel][secondModel][thirdModel],'four')">
   <option value="" disabled selected>select a category</option>
   <option *ngFor="let item of third" [value]="item">{{item}}</option>
 </select>

<br>

 <select [(ngModel)]="fourModel" id="four">
   <option value="" disabled selected>select a category</option>
   <option *ngFor="let item of four" [value]="item">{{item}}</option>
 </select>

and finally one common function which will update the models

  ChangeDropdown = (value,dropdownName) =>{

    this[dropdownName] = Object.keys(value).map(a=>{
      return a;
    })
  }

Demo

edited Dec 28, 2018 at 4:35

answered Dec 28, 2018 at 4:29

Just code

13.8k10 gold badges54 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

S S Over a year ago

Thank you for your help. I need one more help. First I select all the 4 fields then if i select first one again only second menu is reset but there is still previous data in third and fourth menu. Can you pls give a look

Just code Over a year ago

@SS you need to empty the result set based on the selection , so when you are selecting the first you need to empty 2nd third and fourth, if you select 2nd empty third and fourth and so on.]

S S Over a year ago

yes I tried this.firstModel = '' based on the selection. But that didnot worked

S S Over a year ago

if(dropdownName == 'second') { this.secondModel = ''; this.thirdModel = ''; this.fourModel = ''; } else if(dropdownName == 'third') { this.thirdModel = ''; this.fourModel = ''; }

Just code Over a year ago

@SS check my demo link again

Collectives™ on Stack Overflow

How to display multi dimensional array into the multiple dropdown menu?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related