My goal is to retrieve data and populate two dropdowns based on user selection. However, the code I've written isn't giving me the desired output and instead, errors are occurring. Being new to Angular, I would appreciate a review of my code. Here is the JSON data from which I am fetching information:
This is the HTTP service method I have implemented:
getAccountByApiGateway(accountType: string) {
return this.http.get(this.serviceUrl + "/account-type/" + accountType);
}
Here is the JSON data:
{
"data": [
{
"id": "8a8080fc710cdc140171104216c2002b",
"name": "a",
"org": {
"id": "8a8080c4701e557501701e6cbeed003e",
"orgPlan": "ENTERPRISE"
},
"accountType": "AWS"
},
{
"id": "8a80802c712a8e8301712ad32c540001",
"name": "azure",
"org": {
"id": "8a8080c4701e557501701e6cbeed003e",
"orgPlan": "ENTERPRISE"
},
"accountType": "AZURE"
},
{
"id": "8a80802c712a8e8301712b177d2e0002",
"name": "aws2",
"org": {
"id": "8a8080c4701e557501701e6cbeed003e",
"orgPlan": "ENTERPRISE"
},
"accountType": "AWS"
},
{
"id": "8a80802c712a8e8301712b7c3b5a0003",
"name": "FX AWS",
"org": {
"id": "8a8080c4701e557501701e6cbeed003e",
"orgPlan": "ENTERPRISE"
},
"accountType": "AWS"
}
],
"totalPages": 0,
"totalElements": 0
}
Below you can find the component's data:
accountTypes: Type[] = [
{ value: "AWS", viewValue: "AWS" },
{ value: "AZURE", viewValue: "AZURE" }
];
ngOnInit() {
this.getApiGatewayAccounts();
}
changeIssueTracker(type) {
if (type.value === "AWS") {
this.job.issueTracker.accountType = "AWS";
} else if (type.value === "AZURE") {
this.job.issueTracker.accountType = "AZURE";
}
this.getApiGatewayAccounts();
}
getApiGatewayAccounts() {
this.handler.activateLoader();
this.apiGatewayService.getAccountByApiGateway("API_GATEWAY").subscribe(
results => {
this.handler.hideLoader();
if (this.handler.handle(results)) {
return;
}
this.apiAccounts = results['data'];
},
error => {
this.handler.hideLoader();
this.handler.error(error);
}
);
}
The template code looks like this:
<mat-form-field class="full-width">
<mat-select name="cloudString" placeholder="Select API Gateway">
<mat-option disabled>--- Select API Gateway ---</mat-option>
<mat-option *ngFor="let account of accountTypes" [value]="account.value" (click)="changeIssueTracker(type)">
<span *ngIf="account.value=='AWS'">
<img class="img-responsive h-75" src="assets/images/aws-small.png" />
</span>
<span *ngIf="account.value=='AZURE'">
<img class="img-responsive h-75" src="assets/images/azure-small.png" />
</span>
{{ account.value}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="full-width">
<mat-select name="cloudString2" [ngModelOptions]="{standalone: true}">
<mat-option *ngFor="let account of apiAccounts" [value]="account.name">
{{account.name}}
</mat-option>
</mat-select>
</mat-form-field>
Upon clicking on the first dropdown, I encountered the following error:
core.js:4002 ERROR TypeError: Cannot read property 'value' of undefined
at ApiGatewayComponent.push../src/app/components/manage/api-gateway/api-gateway.component.ts.ApiGatewayComponent.changeIssueTracker