Angular2 ngFor Iterating over JSON

Question

I´m fairly new to Angular2, and i want to read out a json file. It´s working, that I get the file from a REST-Client, i can save the file in a local variable in a component and furthermore I´m able to read properties of the variable. Now I´m trying to read other properties (Array) with ngFor, but this isn´t working. Here´s the html:

//Working
<td>{{status.rights}}</td>
//Not working
<tr *ngFor="let folder of status.recfolders">
                                <td>{{folder.text}}</td>
                                <td>{{folder.size}}</td>
                                <td>{{folder.free}}</td>
                            </tr>

And the JSON:

{
  "status": {
    "rights": "full",
    "recfiles": "13",
    "recfolders": {
      "folder": [
        {
          "size": "7866296029184",
          "free": "3724003368960",
          "text": "\\\\edited\\Daten\\Videos\\Aufnahmen"
        },
        {
          "size": "59495149568",
          "free": "38696935424",
          "text": "C:\\Users\\edited\\Desktop"
        }
      ]
    }
  }
}

If i try it that way, Angular says Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." If i try *ngFor="let folder of status.recfolders.folder" it´s not working either, but the error is self.context.status.recfolders is undefined... I hope someone can say me, what I´m doing wrong ;)

You have to use Elvis operator to avoid self.context error : *ngFor="let folder of status.recfolders?.folder" — Poonam
– Poonam, Commented Oct 26, 2016 at 5:41
yes, that´s right, thank you! The Elvis operator was the solution ;) — Junias
– Junias, Commented Oct 26, 2016 at 5:48

micronyks · Accepted Answer · 2016-10-26 06:02:57Z

2

As folder contains array it should be there with *ngFor. ?. operator will do the binding when folder array is available for the binding.

NOTE: ?. operator should be used when you are working with async call. For static data it is not required.

It should be,

*ngFor="let folder of status.recfolders?.folder"

edited Oct 26, 2016 at 6:02

answered Oct 26, 2016 at 5:35

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

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

2 Comments

Junias Over a year ago

yes, that´s right, thank you! The Elvis operator was the solution ;)

Junias Over a year ago

Can you edit the answer, so i can say it´s correct? ;)

Poonam · Accepted Answer · 2016-10-26 05:58:23Z

1

You should use Elvis operator (?.) to avoid self.context error.

Try this:

<tr *ngFor="let folder of status.recfolders?.folder">
      <td>{{folder.text}}</td>
      <td>{{folder.size}}</td>
      <td>{{folder.free}}</td>
</tr>

answered Oct 26, 2016 at 5:58

Poonam

5494 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular2 ngFor Iterating over JSON

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related