title: Angular - how to get result of a JSON object?
body: <p>I am trying to use the new Public API V2 CoinMarketCap, but I am trying some difficulty with this.</p>
  
  <p>JSON:</p>
  
  <p><a href="https://api.coinmarketcap.com/v2/ticker/?limit=10" rel="nofollow noreferrer">https://api.coinmarketcap.com/v2/ticker/?limit=10</a></p>
  
  <p>my model Coin:</p>
  
  <pre><code>export class Coins {
      id: string;
      name: string;
      symbol: string;
      rank: number;
      price_usd: number;
      price_btc: number;
      _24h_volume_usd: number;
      market_cap_usd: number;
      available_supply: number;
      total_supply: number;
      percent_change_1h: number;
      percent_change_24h: number;
      percent_change_7d: number;
      last_updated: number;
  }
  </code></pre>
  
  <p>my service:</p>
  
  <pre><code>urlBase = 'https://api.coinmarketcap.com/v2/ticker/?limit=10';
  getCoins() {
     return Observable
     .timer(0, 5000)
     .flatMap(() =&gt;  this.http.get(this.urlBase))
     .pipe(
        map(res =&gt; res), 
        catchError(this.handleError)
      )
  }
  </code></pre>
  
  <p>my component:</p>
  
  <pre><code>coins: Coins[];
  getCoins() {
    this.coinsService.getCoins().subscribe(
      data =&gt; {
        this.coins = data;
      });
  }
  </code></pre>
  
  <p>my html:</p>
  
  <pre><code>&lt;div class="card card-inverse" *ngFor="let coin of coins"&gt;
  </code></pre>
  
  <p>output:</p>
  
  <pre><code>ERROR Error: Cannot find a differ supporting object '[object Object]' of type 
  'object'. NgFor only supports binding to Iterables such as Arrays.
  </code></pre>
  
  <p>any suggestion?</p>
  
  <p>thank you</p>