Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

I looked at similar questions, but none of them helped me. I am going to receive an object like the following:

[
  {
    "id": 1,
    "name": "Safa",
    "email": "neerupeeru@mail.ee",
    "purpose": "thesis",
    "programme": "Software Engineering",
    "year": 2016,
    "language": "Estonian",
    "comments": "In need of correcting a dangling participle.",
    "status": "RECEIVED"
  },
  {
    "id": 2,
    "name": "Safa",
    "email": "neerupeeru@mail.ee",
    "purpose": "thesis",
    "programme": "Software Engineering",
    "year": 2016,
    "language": "Estonian",
    "comments": "In need of correcting a dangling participle.",
    "status": "RECEIVED"
  },
  {
    "id": 3,
    "name": "Salman",
    "email": "neerupeeru@mail.ee",
    "purpose": "thesis",
    "programme": "Software Engineering",
    "year": 2016,
    "language": "Estonian",
    "comments": "In need of correcting a dangling participle.",
    "status": "RECEIVED"
  }
]

and here is my http service to receive it:

getRequest(){
        return this._http.get("http://consultationwebserver.herokuapp.com/requests").map(res => res.json());
    }

and finally, in the i called the service in this way:

requests;
    constructor(private _http:requestService){}
    ngOnInit(){
        this.requests=this._http.getRequest().subscribe(res=>this.requests=res);
    }

Unfortunately, when the page loads it complains with:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

So, what is going wrong with this code?

There you don't need to use this.requests= when you are making get call(then requests will have observable subscription). You will get a response in observable success so setting requests value in success make sense(which you are already doing).

this._http.getRequest().subscribe(res=>this.requests=res);

If it still shows an error related to type, add any/RelevantModel type on subscribe parameter object.

this._http.getRequest().subscribe(
  (res: any[]) => this.requests =res
);

Basically, *ngFor works for only iterable items like arrays. If you assign this.requests to have an object value, and you're trying to use *ngfor it will return this error.

For example, when you declare array like this.myArray = {} this problem will occur. It should be this.myArray = [].

Alternative way (async pipe)

Using async pipe with requests$ as observable stream.

private _http = inject(HttpClient); 
requests$ = this._http.getRequest();

HTML

<ng-container *ngFor="let request of requests$ | async">
  {{ request.name }}
</ng-container>

---

Angular v17 onwards

Alternative way (using signal)

Using async pipe with requests$ as observable stream.

private _http = inject(HttpClient); 
requests = toSignal(this._http.getRequest());

HTML

@for(request of requests()) {
  {{ request.name }}
}

Alternative way (using resource signal)

Using async pipe with requests$ as observable stream.

private _http = inject(HttpClient); 

requests = resource({
   loader: () => this._http.getRequest(),
})
requests = toSignal(this._http.getRequest());

HTML

@for(request of requests()) {
  {{ request.name }}
}