Display data json in dropdown using angular material

Question

I have created an Angular project with angular material and I want to display a list of units inside a dropdown.

the data comes like expected like this :

this is my .ts code :

ListUnits:Array<Unit>=[]

units(){
return this.trq.getListUnit().subscribe(
  (data)=>{
    this.ListUnits.push(data.respModel);
    console.log(this.ListUnits);
  }
)

}

and here is my .HTML code :

<mat-label>Unite</mat-label>
            <mat-select formControlName= "unite_id" required>
                <mat-option *ngFor="let unit of ListUnits"[value]="unit.id">
                  {{unit.unitName}}
                </mat-option>
            </mat-select>

but unfortunately, nothing appears Which are the steps to follow to achieve that?

Can you attach the API response as JSON snippet to the question? Look like it is a nested array. Thanks. — Yong Shun
– Yong Shun, Commented Mar 7, 2022 at 11:20

zainhassan · Accepted Answer · 2022-03-07 11:23:15Z

2

You are pushing array inside array. Instead do this if you want to retain current data in ListUnits

this.ListUnits = [...this.ListUnits, ...data.respModel];

Otherwise simply assign array from response to ListUnits

this.ListUnits = data.respModel;

answered Mar 7, 2022 at 11:23

zainhassan

1,7929 silver badges12 bronze badges

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

1 Comment

Prince Over a year ago

TimeArray = [{id:1,name:'test1'},{id:2,name:'test2'}];

Prince · Accepted Answer · 2022-12-06 09:24:23Z

-2

sample json array declaration

TimeArray = [{id:1,name:'test1'},{id:2,name:'test2'}];

answered Dec 6, 2022 at 9:24

Prince

2753 silver badges16 bronze badges

Collectives™ on Stack Overflow

Display data json in dropdown using angular material

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related