Populate dropdown with values dynamically from data set

Question

I have a dropdown that I am trying to populate dynamically using the following data set

this.additionalPercentages = this.offer.offerData.wellbeing.retirementPackages[0].additionalVoluntaryContributionPercentages;

this.additionalPercentages is consoled and looking like this: [5, 6]

<p-dropdown
      (onChange) = "getAdditionalPercentage($event)"
      class="fund-dropdown"
      [options]="additionalPercentages"
      [showClear]="false"
></p-dropdown>

After doing this, I see that the dropdown is blank with no errors in the console either. Any ideas?

Ankit Chaudhary · Accepted Answer · 2020-01-29 12:19:33Z

1

options takes

An array of objects to display as the available options.

So you need to change your additionalPercentages into array of objects i.e.

[
  {label: 5, value: 5},
  {label: 6, value: 6}
]

Code:

this.additionalPercentages=this.additionalPercentages.map(
      (item)=>({label:item,value:item}));

edited Jan 29, 2020 at 12:19

answered Jan 29, 2020 at 12:10

Ankit Chaudhary

4,1092 gold badges15 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Populate dropdown with values dynamically from data set

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related