Cannot find a differ supporting object in Angular

0
votes

I've been trying to display data from a web api but i got an error when iterating to display them.

Here's is a copy of my component file. 

this.uploadService.getFiles()
    .subscribe(
          data => this.files$ = data 
     );

HTML COMPONENT FILE:

<a *ngFor="let file of files$"  class="list-group-item list- 
    group-item-action">{{file.id}}</a>`

THE WEBAPI JSON FILE:

[{"Id":458,"FileCode":609"},{"Id":451,"FileCode":602"}]

THE SERVICE FILE:

public getFiles(){
    return this.httpClient.get(this.SERVER_URLGETFILE)
}

The error message i got is "Cannot find a differ supporting object []NgFor only supports binding to Iterables such as Arrays."

2
angularhttp-get
Cannot find a differ supporting object, is telling you that you are trying to use an object in the *ngFor. Are you sure your api is returning an Array ? – Dince12
I included the value that my API is returning. – jrpf

2 Answers

0
votes

initialize your files$ like this:

files$ : any = [];
0
votes

Try this code

this.uploadService.getFiles()
    .subscribe(
          data: any[] => this.files$[] = data 
     );