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 ;)

Answer 1

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"

Answer 2

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>