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

I am practicing rest API.

I am using fake data from
I am practicing GET that the url is and JSON format is like this.
“data”: {
“id”: 2,
“first_name”: “Janet”,
“last_name”: “Weaver”,
“avatar”: “

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

html file


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) => {
this.datas = datas;
(error) => {
() => {

service file
private dataUrl: string = ‘’;
getUser2(): Observable<SampleData[]> {
return this.http.get(this.dataUrl)

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.

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.