Observable with Angular 4 , NgFor only supports binding to Iterables such as arrays

Viewed 7719

Yes, I see that other people get this error , I just don't quite get how to fix it in my code

private _url = 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LTC,EOS,DASH&tsyms=USD'

If I didn't have the return it does not crash with the error , but I do want to return the data.

I have a component that calls up this method ( in this service ts file )

Subscriber:

getAllCoins() {

    var blah = [];

    return this.getCoins().subscribe(
        data => {
            blah = data;               
            //console.log('subscriber coins', blah)
        }
    )

}

Calls this code

getCoins() {
    return this.http.get(this._url)
        .map((response: Response) => response.json())
        //.do(data => console.log(data))
        .do(data => console.log('All: ' + JSON.stringify(data)))  // do operator to peek 
        .catch(this.handleError);
}

Now, I see that the data from the url looks like this

{
"BTC": {
  "USD": 3349.1
},
"ETH": {
  "USD": 296.3
},
"LTC": {
  "USD": 47.56
},
"EOS": {
  "USD": 1.83
},
"DASH": {
  "USD": 195.83
}
}

How can I prevent from getting this error errors.ts:42 ERROR Error: Uncaught (in promise): Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

UPDATE for comment question

@Component({
template: `
<div>test</div>
<div *ngFor="let coin of coinsList">
 abc
 </div>
`
})
2 Answers
Related