Values are not populating in multiselect dropdown values based on another multiselect dropdown PrimeNg

Question

I have two multiselect dropdowns as given below. If I choose

• First dropdown :"ASIA" then Second dropdown should populate values: "India" and "UAE"
• First dropdown :"ASIA" and "EUROPE" then Second dropdown should populate values: "India", "UAE" and "Germany"

I have tried the below code and the values are not populating in second dropdown when I select value form first. Second dropdown is empty always.

First multiselect dropdown :-

<p-multiSelect (onChange)="updateSecondDropdown($event)" [options]="regions" [(ngModel)]="regionValues" optionLabel="name" optionValue="name" defaultLabel="Select Regions"></p-multiSelect>

Second multiselect dropdown :-

<p-multiSelect [options]="countries" [(ngModel)]="countryValues" optionLabel="name" optionValue="name" defaultLabel="Select Countries"></p-multiSelect>

Typescript code :-

countries:any[]=[];

regions:any[]=[
  {id:1, name:"ASIA"},
  {id:2, name:"EUROPE"},
  {id:3, name:"NORTH AMERICA"},
  {id:4, name:"SOUTH AMERICA"},
]


countriesMapping:any[]=[
  {id:1, region:"ASIA", name:"India"},
  {id:2, region:"ASIA", name:"UAE"},
  {id:3, region:"NORTH AMERICA", name:"United States"},
  {id:4, region:"NORTH AMERICA", name:"Canada"},
  {id:5, region:"SOUTH AMERICA", name:"Mexico"},
  {id:6, region:"EUROPE", name:"Germany"}
]


updateSecondDropdown(event){
  this.countries=[];
  let selectedRegions = event.values;
  let selectedRegionNames = selectedRegions.map(o => o.name);
  selectedRegionNames.forEach((region) => {
   this.countriesMapping.forEach((country, index) => {
    if(country.region===region)
       this.countries.push(this.countriesMapping[index]);
   });
  });
}

I am using PrimeNg version: 8.0.0

Answer 1

There are several problems in your updateSecondDropdown function. Basically, you can change it to the following code:

updateSecondDropdown(event) {
    const selectedRegions = event.value;
    this.countries = this.countriesMapping.filter((country) => selectedRegions.includes(country.region));
}

The problems are:

1. the list of selections on the event parameter are in the event member, not events.
2. No need to map to the list of selected regions using o => o.name since you already get a list of names.

---

Final note:

This is not exactly an error but a tip. Whenever possible, use the proper array function for the job. It will make your code much simpler and easier to read. If you need to select certain items from a list of items, use the filter function. If you need to check if an item exists in a list of items, use the includes function.

The forEach function is is useful for many tasks but is not always the right tool.

Other functions of note:

• some to check if at least one item in the list fits a criteria, returns boolean
• every to check if all items in the least fit a criteria, returns boolean

There are others and I recommend you go over them to have them in the back of your mind so you'll know to look for them if the need arises.

Answer 2

This solved my problem

updateSecondDropdown(event) { 
   const selectedRegions = event.value; this.countries = 
   this.countries = this.countriesMapping.filter((country) => {
     return selectedRegions.some(region => region.name===country.region)
   }); 
}