I get response from an API that incorporates, nested array of objects in the following way.

var virtualAddrObjFinal = [
    {
      "accountNo": "5019000",
      "vpainfo": [
        {
          "vpa": "newq@bandhan"
        },
        {
          "vpa": "log@bandhan"
        }
      ]
    },
    {
      "accountNo": "1018000",
      "vpainfo": [
        {
          "vpa": "newesaf@bandhan"
        }
      ]
    }
  ]

And want to populate the values in dropdown using vpainfo object. Here am having issue with the nested object. Can any one suggest the way to achieve this.

I have tried the below way,

<ion-select [formControl]="vaddr" (ionChange)="fetchVPAAccountNumber($event)" interface="popover">
   <ion-option *ngFor="let vaddrlist of virtualAddrObjFinal.vpainfo;let i = index" [value]="vaddrlist">{{vaddrlist.vpa}}
   </ion-option>
</ion-select> 

And need to show the accountNo after selecting the specific vpa.

CodePudding user response：

I created a stackblitz so that you can check my solution.

HTML - In your html, you need to add ng-container to hold the first ngFor to iterate the virtualAddrObjFinal array then add the second ngForin your ion-option to iterate the list of vpainfo. I also added a label for the selected account number that will only show when you only selected something from the ion-select.

<ion-item>
  <ion-select style="width: 100%" formControlName="vaddr" (ionChange)="fetchVPAAccountNumber($event)" interface="popover">
    <ng-container *ngFor="let item of virtualAddrObjFinal;let i = index">
      <ion-option *ngFor="let vaddrlist of item.vpainfo;let i = index" [value]="vaddrlist">{{vaddrlist.vpa}}
      </ion-option>
    </ng-container>
  </ion-select>
</ion-item>
<ion-item *ngIf="form.controls['vaddr'].value">
  <ion-label>Account Number: {{accountNumber}}</ion-label>
</ion-item>

TS - In the ts file, I filtered the virtualAddrObjFinal array which checks the correct accountNumber for the selected vpa from the ion-select. Then, I assigned it to the accountNumber variable.

fetchVPAAccountNumber(ev) {
  const selected = this.virtualAddrObjFinal.filter((e) => {
    return e.vpainfo.some((v) => {
      return v.vpa.indexOf(ev.vpa) > -1;
    });
  });
  this.accountNumber = selected.length > 0 ? selected[0].accountNo : '';
}