0

I'm trying to fetch datas from rapidapi but i get this ERROR message:

"ERROR Error: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the keyvalue pipe?"

That is my html:

<div class="row details mt-3" *ngFor="let coin of coinsList">
  <div class="col-3">
    <a href=""><img src="..." class="mb-3"></a>
  </div>
  <div class="col-3">
    <p>{{coin.name}}</p>
  </div>
  <div class="col-3 text-center">
    <p>Price</p>
  </div>
  <div class="col-3 text-end">
    <p>1</p>
  </div>
</div>

The console.warn works but the *NgFor don't

My code is this, I'm using Angular 14.2.10:

export class CryptoListComponent implements OnInit {
    coinsList: any
    constructor(private http: HttpClient) { }

    ngOnInit(): void {
        this.getCoinsList()
    }

    // interface Response { results: Coins[] }

    getCoinsList() {
        let options = {
            method: 'GET',
            headers: {
                'X-RapidAPI-Key': '4c10ffb7eemsha0cedbbe44177e3p1b0292jsn06e3680b3b7b',
                'X-RapidAPI-Host': 'cryptocurrency-markets.p.rapidapi.com'
            }
        }
        return this.http.get('https://cryptocurrency-markets.p.rapidapi.com/coins?page=1', options).subscribe((res) => {
            this.coinsList = res
            console.warn(this.coinsList);
        })
    }

}
N.F.
  • 3,844
  • 3
  • 22
  • 53
Alberto Scarsi
  • 13
  • 3
  • It seems like the response from the API is an object, but the *ngFor directive expects an iterable. One way to fix this issue is to extract the array of coins from the response object and assign it to the coinsList variable – sfelli Jan 18 '23 at 08:13

1 Answers1

0

You need to give the ngFor an array, here you're giving it an object, try:

this.coinsList = res.results
Rachid O
  • 13,013
  • 15
  • 66
  • 92