Cannot find a differ supporting object '[object Object]' of type

Ionic Framework ionic-v3
1

I am practicing rest API.

I am using fake data from https://reqres.in/
I am practicing GET that the url is https://reqres.in/api/users/2 and JSON format is like this.
{
“data”: {
“id”: 2,
“first_name”: “Janet”,
“last_name”: “Weaver”,
“avatar”: “https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg”
}
}

model file
export interface SampleData {
id: number,
first_name: string,
last_name: string,
avatar?: string
}

html file

{{dat.first_name}}

ts file
import { SampleData } from ‘…/…/model/data’; //import model file
private datas: SampleData[];

constructor(public navCtrl: NavController, public navParams: NavParams, private todoService: TodoProvider) {

}

ionViewDidLoad() {
this.todoService.getUser2().subscribe((datas) => {
console.log(datas);
this.datas = datas;
},
(error) => {
console.log(error);
},
() => {
//console.log(‘success’);
});
}

service file
private dataUrl: string = ‘https://reqres.in/api/users/2’;
getUser2(): Observable<SampleData[]> {
return this.http.get(this.dataUrl)
.catch(this.errorHandler);
}

I’ve got error message like below.
Error: Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays.
I have no idea what to do. For FYI, I am using Angular 5 and import HttpClient, so I didn’t add map.

Thank you in advance.

2

Are you using a *ngFor loop in your template? It looks like you are trying to iterate over an object, but you can use *ngFor only with iterables.