Angular iterate object of arrays

Question

TYPESCRIPT:

this.paises = this.api.getAllCountries();

        this.paises.forEach(item => {
            this.paisesData.push(item);
        });

ANGULAR:

 <ion-item button detail lines="inset" *ngFor="let pais of paisesData" (click)="paisesInfo(pais)">
            {{ pais.response }}
        </ion-item>

OBJECT OF ARRAYS:

QUESTION:

How to list in its owns button every country that is inside response array?

MoxxiManagarm · Accepted Answer · 2020-08-26 11:55:09Z

1

Just put another loop

<ion-item button detail lines="inset" *ngFor="let pais of paisesData" (click)="paisesInfo(pais)">
  <ul>
    <li *ngFor="let country of pais.response">{{ country }}</li>
  </ul>
</ion-item>

answered Aug 26, 2020 at 11:55

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

André Castro Over a year ago

That's it. Thank you.

uiTeam324 · Accepted Answer · 2020-08-26 12:00:51Z

0

Insert response data into the array and avoid multiple loops on template.

this.paises = this.api.getAllCountries();

    this.paises.forEach(item => {
        this.paisesData.push(item.response);
    });

HTML:

 <ion-item button detail lines="inset" *ngFor="let pais of paisesData" (click)="paisesInfo(pais)">
        {{ pais }}
    </ion-item>

answered Aug 26, 2020 at 12:00

uiTeam324

1,25515 silver badges34 bronze badges

1 Comment

André Castro Over a year ago

I need the inner loop as sugested in previous answer because without it i'm not able to create separate buttons for every key.

Collectives™ on Stack Overflow

Angular iterate object of arrays

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related