0

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.

1 Answer 1

1

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 : '';
}
1
  • Great! it is working fine
    – vishnu
    Sep 29, 2021 at 7:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.