Junias Junias - 1 month ago 15
JSON Question

Angular2 ngFor Iterating over JSON

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

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"