Populate dropdown from data set in Angular

Question

I am trying to populate a dropdown in angular. I have a set of values that need to appear in the dropdown. Here is my code.

rolesArr: SelectItem[];

for (let i = 0; i < user.roles.length; i ++) {
    this.rolesArr = [
     { label: user.roles[i].name, value: i }
    ];
}

<div class="input-container">
     <label for="role">Role*</label>
     <p-dropdown [options]="rolesArr" formControlName="role" id="role" placeholder="Please select"></p-dropdown>
</div>

I am currently only seeing the last value in the data set.

This is my data set

{
  "roles": [
    {
      "id": 1,
      "name": "System Admin",
      "parent": "00000000-0000-0000-0000-000000000000"
    },
    {
      "id": 2,
      "name": "Internal Account Manager",
      "parent": "00000000-0000-0000-0000-000000000000"
    },
    {
      "id": 3,
      "name": "CAT Manager",
      "parent": "00000000-0000-0000-0000-000000000000"
    }
  ]
}

share the 'p-dropdown' component aswell

Robert
– Robert

2019-03-15 06:33:19 +00:00
Commented Mar 15, 2019 at 6:33 — Robert
– Robert, Commented Mar 15, 2019 at 6:33

zmag · Accepted Answer · 2019-03-15 06:45:30Z

1

You are reassigning rolesArr every time when iterating user.roles.

Assign an array to rolesArr.
Call rolesArr.push() method.

rolesArr: SelectItem[] = [];

for (let i = 0; i < user.roles.length; i ++) {
    this.rolesArr.push({ label: user.roles[i].name, value: i });
}

answered Mar 15, 2019 at 6:45

zmag

8,27112 gold badges39 silver badges47 bronze badges

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

Comments

Bogdan B · Accepted Answer · 2019-03-15 06:34:12Z

1

That's exactly what's expected with your current code. Be careful with your for loop. Every loop you re-assign the array to the current element. What you should do instead is use this.rolesArr.push({label:user.roles[i].name,value:i})

answered Mar 15, 2019 at 6:34

Bogdan B

96212 silver badges29 bronze badges

2 Comments

RRB Over a year ago

I am now getting ERROR TypeError: Cannot read property 'push' of undefined. I have added the data set in the question.

Bogdan B Over a year ago

Add this line before the for loop " if(!this.rolesArr){ this.rolesArr = [] as SelectItem[] ;] "

Qellson · Accepted Answer · 2019-03-15 06:34:14Z

1

You are not pushing into the array. You are setting the 0 value of the array. Try it with.

for (let i = 0; i < user.roles.length; i ++) {
    this.rolesArr.push(
     { label: user.roles[i].name, value: i }
    );
}

answered Mar 15, 2019 at 6:34

Qellson

5522 silver badges7 bronze badges

1 Comment

RRB Over a year ago

I am now getting ERROR TypeError: Cannot read property 'push' of undefined. I have added the data set in the question.

Collectives™ on Stack Overflow

Populate dropdown from data set in Angular

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related