Angular2: ngFor iterating through object array

Question

For example with this JSON:

{
  "TableRows": [
    {
      "Name": "Lord of the Rnis",
      "Length": "2:40"
    }
  ],
  "Category": "Fantasy"
}

Into these classes:

export interface IMovies{
    Category: string;
    TableRows: ITableRows[];
}

export interface ITableRows{
    Name: string;
    Length: string;
}

The following ngFor logic works great, but it's not what I want to loop:

<tr *ngFor="let row of rows">
    <td>{{row.Category}}</td>
    <td>{{row.TableRows[0].Name}}</td>
    <td></td>
</tr>

This logic does NOT work:

<tr *ngFor="let row of rows.TableRows">
     <td>{{row.Name}}</td>
     <td>{{row.Length}}<td>
</tr>

What am I doing wrong here?

what are rows? an array or Imovies? or an array of ITableRows?? — Abiezer
– Abiezer, Commented Oct 5, 2017 at 18:11

Nitheesh · Accepted Answer · 2017-10-05 18:11:48Z

1

In your case, your first statement will not be working.

The first statement

<tr *ngFor="let row of rows">
    <td>{{row.Category}}</td>
    <td>{{row.TableRows[0].Name}}</td>
    <td></td>
</tr>

This is not working because ngFor in angular 2 is similar to that of ng-repeat in angular 1. In order for your ngFor to work, the looping item must be an array, in your case rows is an object and not an array so clearly it won't work.

In your second statement

<tr *ngFor="let row of rows.TableRows">
     <td>{{row.Name}}</td>
     <td>{{row.Length}}<td>
</tr>

The looping item rows.TableRows is an array with one element, so that will work and will produce the output as

Lord of the Rnis    2:40

I hope this is what you are looking for.

answered Oct 5, 2017 at 18:11

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

Angular2: ngFor iterating through object array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related