I am facing an issue with displaying data from an API in a mat select input field. I have tried to iterate over the data using a for loop but it is not working as expected. Can someone help me figure out how to properly populate the mat select input with data from this API?
TestArrList:any[]=[];
data1!:any[];
ngOnInit(): void {
let uri = 'APIURL';
this.http.get(uri).subscribe((data:any) => {
this.TestArrList = data
for(var i = 0;i < this.TestArrList.length;i++)
for(var j = 0;j < this.TestArrList[i].Items.length;j++)
this.data1.push(this.TestArrList[i].Items[j].Name);
console.log(this.TestArrList);
return this.data1
});
}
<mat-grid-tile [colspan]="fieldColspan">
<mat-form-field class="form-field" appearance="outline" style="width:20vw">
<mat-label>Location </mat-label>
<mat-select placeholder ="Select test" [formControl]="testControl">
<mat-option *ngFor="let item of TestArrList" [value]="item.name">
{{item.value}}
</mat-option>
</mat-select>
</mat-form-field>
</mat-grid-tile>I need assistance in fetching the "Value" (value1 for test, value2 for test, value3 for test) from each Items in the API response.
[
{
"Items": [
{
"Name": "Id",
"Value": "1"
},
{
"Name": "test",
"Value": "value1 for test"
}
],
"Value": null
},
{
"Items": [
{
"Name": "Id",
"Value": "2"
},
{
"Name": "test",
"Value": "value2 for test"
}
],
"Value": null
},
{
"Items": [
{
"Name": "Id",
"Value": "3"
},
{
"Name": "test",
"Value": "value3 for test"
}
],
"Value": null
}
]