Problem: NgFor only supports binding to Iterables such as Arrays

Ionic Framework
1

Hello,

I am trying to get data from reqres.in and showing list user on the home page but getting that error after ngfor.

image

This is my home.page.ts code:

import { Component } from '@angular/core';
import { Plugins } from '@capacitor/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';



const { Storage } = Plugins;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  veriler:any;

  adres:any = 'https://reqres.in/api/users?page=2';

  constructor(private router:Router, public http:HttpClient) {
    this.veriAl();
    
  }

  veriAl(){

    this.http.get(this.adres).subscribe(sonuc=>{this.veriler=sonuc; console.log(this.veriler)}, hata=>{console.log(hata)});
   
  }


  async removeItem(item) {
    await Storage.remove({ key: item });
  }


  

  logout()
  {

    this.removeItem('user_ionichttpAuth');
    this.router.navigateByUrl('/login');

  }

}
2

This api returns an object. You should use ngFor with an array.
Returned object has array in data attribute. Try => *ngFor=“let item of veriler.data”

1 Like
3

Thanks. I created my own json file and customized the object as an array, that was my solution.