Angular 2: Nested *ngFor JSON data

Question

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.

alex kucksdorf · Accepted Answer · 2017-02-13 12:56:36Z

2

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

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

answered Feb 13, 2017 at 12:56

alex kucksdorf

2,6631 gold badge18 silver badges27 bronze badges

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

1 Comment

o1n3n21 Over a year ago

Perfect. Thanks so much Alex

Yoav Schniederman · Accepted Answer · 2017-02-13 14:14:40Z

0

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

answered Feb 13, 2017 at 14:14

Yoav Schniederman

5,4033 gold badges30 silver badges32 bronze badges

1 Comment

Donald Duck is with Ukraine Over a year ago

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.

Collectives™ on Stack Overflow

Angular 2: Nested *ngFor JSON data

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related