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, Oct 26 '16 at 05:41
yes, that´s right, thank you! The Elvis operator was the solution ;) — Junias, Oct 26 '16 at 05:48

micronyks · Accepted Answer · 2016-10-26T06:02:57.110

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 '16 at 06:02

answered Oct 26 '16 at 05:35

micronyks

54,797
15
112
146

yes, that´s right, thank you! The Elvis operator was the solution ;) – Junias Oct 26 '16 at 05:48
Can you edit the answer, so i can say it´s correct? ;) – Junias Oct 26 '16 at 05:49

score 1 · Answer 2 · answered Oct 26 '16 at 05:58

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 '16 at 05:58

Poonam

549
4
15

Angular2 ngFor Iterating over JSON

2 Answers2

Linked