CODEWITHSUNDEEP
jsonangularngfor
o1n3n21
o1n3n21

Reputation: 364

Angular 2: Nested *ngFor JSON data

I have some JSON data structured as:

[{"x":"Example1", "y":["1","2","3"],"id":"one"},{"x":"Example2", "y":["11","12","13"],"id":"two"}]

I am trying to bind the data so it shows:

One
1 2 3

Two
11 12 13

I'm pretty sure I'm doing this entirely wrong, but can't seem to get my head around it...! I can get a result using {{item.y[0]}}, but can't do this nested *ngFor.

  <ion-item *ngFor="let item of Data">
    <h2>{{item.id}}</h2>
    <h3 *ngFor="let y of item">{{item.y}}</h3>
  </ion-item>

Thank you in advance for any help.

Upvotes: 0

Views: 635

Answers (2)

Yoav Schniederman
Yoav Schniederman

Reputation: 5391

<ion-item *ngFor="let item of Data">
    <h2>{{item.id}}</h2>
    <h3 *ngFor="let y of item.y">{{y}}</h3>
</ion-item>

Upvotes: 0

alex kucksdorf
alex kucksdorf

Reputation: 2633

I think what you are trying to do is the following:

<h3 *ngFor="let y of item.y">{{y}}</h3>

Upvotes: 2

Related Questions