CODEWITHSUNDEEP
angular
vennapusa
vennapusa

Reputation: 219

How to loop through an array of arrays?

I'm trying do display data from a json array inside a select dropdown.

<select class="form-control-custom" [(ngModel)]="selected"  placeholder="Filter Category By">
    <option>Get Countries By Currency Name</option>
    <option *ngFor="let currency of allData;">{{currency[0].name}}</option>          
</select>

I have written a logic to get all currencies arrays inside the allData field that i have used in select dropdown. The data looks like this: enter image description here

So i am not able to iterate the array inside another array using single ngFor loop,also i have to display data inside select dropdown only.

Here is the actual api of json data: https://restcountries.eu/rest/v2/all

I am trying to loop currencies array inside this json data

Any kind of help is highly appreciated.

Thanks in advance.

Upvotes: 1

Views: 213

Answers (2)

AtechInnovations
AtechInnovations

Reputation: 21

Here are some ideas on how to address what you are after. I like this sample of creating nested items for a select-like component https://codepen.io/sathomas/pen/VpJeEo

That might be a bit complicated for this problem. To keey it simpler I believe that you can use variable binding to create sub select options. Create a parent->child relationship.

<select [(ngModel)]="selectedCountry">
    <option *ngFor="country of AllData" [ngValue]='country'>{{country.name}}</option>
</select>
<select id='child' [(ngModel)]="selectedCurrency">
    <option *ngfor="currency of SelectedCountry.currencies" [ngValue]="currency.code'>{{currency.name}}</option>
</select>

You could also use county.currency as the ngValue for the first select and shortcut the full referencing of it in the second select. However this way with the full country, you could select other property array values in separate select elements.

Note: I wrote all the code without testing for syntax, so please forgive any mistakes there.

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222582

You can use <ng-container> and nested ngFor

 <select class="form-control-custom" [(ngModel)]="selected"  placeholder="Filter Category By">
    <option>Get Countries By Currency Name</option>
    <ng-container *ngFor="let currency of allData;">
      <option *ngFor="let currenObj of currency.currencies;"> {{currenObj.name}} </option>
    </ng-container>    
</select>

DEMO STACKBLITZ

Upvotes: 3

Related Questions