Angular array of array

Question

I've got observable object called user, so:

<ng-container *ngIf="auth.user$ | async as user;">
{{user.displayName}}
</ng-container>

my JSON object looks like:

   "id":"MwdM8bak78eE1omf6u04KtqlE2X2",
   "anonymous":false,
   "cardTokens":{
      "EtVcNxAfm00":{
         "4digits":4123,
         "Vendor":"Visa"
      }
   },
   "displayName":"User",
   "role":"user",

and i want to show all of users cards, so im using:

<ng-container *ngIf="auth.user$ | async as user; else login">
{{user.displayName}}
<ion-item *ngFor="let card of user.cardTokens;">
{{card.4digits}}
</ion-item>
</ng-container>

I see user name, but card tokens show me nothing. what should i do to show cards token array?

The reason why your code doesn't work is, that cardTokens is not an Array but a JavaScript Object. JS Objects are not iterable which is why you need to use either Object.keys() or as @Adrita Sharma pointed out, the keyvalue pipe to be able to iterate. — j.Doe
– j.Doe, Commented Nov 24, 2019 at 16:38
The issue is that cardTokensis NOT an array here. It is an object. You can use the keyvalue pipe for instance to retrieve an iterable key-value pair — MoxxiManagarm
– MoxxiManagarm, Commented Nov 24, 2019 at 16:39

Adrita Sharma · Accepted Answer · 2019-11-24 16:35:58Z

1

Try like this:

    <ion-item *ngFor="let card of user.cardTokens | keyvalue">
            {{card.value["4digits"]}}
    </ion-item>

Working Demo

answered Nov 24, 2019 at 16:35

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

3 Comments

symfonyBeginner Over a year ago

yeah, its working! Could you explain me how can i return "EtVcNxAfm00"?

Adrita Sharma Over a year ago

{{card.key}}. See the modified demo

symfonyBeginner Over a year ago

Everything working. Thank you again, i forgor about | keyvalue

Collectives™ on Stack Overflow

Angular array of array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related