CODEWITHSUNDEEP
javascripthtmlangulartypescriptangular-material
Cpt Kitkat
Cpt Kitkat

Reputation: 1402

How to display Values from a Json Object into a Mat-Select

I have an API which returns me an array of Object.Using Filter I am able to fetch only the object I need. However inside this object is an array whose value I want to show on mat-select. Can someone help me on how to iterate on an array and display it's value on mat-select.

Object that contains values:

{
  "attId" : 2257,
  "attributeName" : "country",
  "attributeValues" : [ "AU", "KG", "IN", "AF" ]
}

I need to show attribute values on mat-select.

For that I have created a mat-select in html.

  <mat-select>
      <mat-option
           *ngFor="let obj of selectedAttributeValues"
                    (click)="get(obj)"
                    [value]="obj.value">
              {{ obj.viewValue }}
      </mat-option>
  </mat-select>

I am guessing if somehow I can get the values(attributeValues) from object to selectedAttributeValues Varaible then it will be visible. Can someone help me figure out.

Upvotes: 1

Views: 2373

Answers (1)

Shashank Vivek
Shashank Vivek

Reputation: 17504

Take a look at this demo code

You can use 

  <mat-select placeholder="Countries" 
       [(ngModel)]="selectedValue" 
       name="country" 
       (change)="changeClient($event.value)">

          <mat-option *ngFor="let code of someVal.attributeValues" 
                      [value]="code">
               {{code}}
          </mat-option>
 </mat-select>

Upvotes: 1

Related Questions