IONIC v3 Получение данных API CoinMArketCap - PullRequest
Новая
       20

IONIC v3 Получение данных API CoinMArketCap

0 голосов
/ 24 июня 2018

Я хочу отобразить список всех криптовалют, доступных на рынке, с помощью ionic.

Для этого я использовал coinmarketcap api.https://coinmarketcap.com/api/

Я передал этот урок -> https://www.djamware.com/post/59924f9080aca768e4d2b12e/ionic-3-consuming-rest-api-using-new-angular-43-httpclient

Проблема, с которой я сталкиваюсь, заключается в том, что я не могу перечислить все монеты.Я могу получить данные из API, но я думаю, что есть проблема в отображении данных.

Данные, возвращаемые API 

{
    "data": [
        {
            "id": 1, 
            "name": "Bitcoin", 
            "symbol": "BTC", 
            "website_slug": "bitcoin"
        }, 
        {
            "id": 2, 
            "name": "Litecoin", 
            "symbol": "LTC", 
            "website_slug": "litecoin"
        }, 
        ...
    },
    "metadata": {
        "timestamp": 1525137187, 
        "num_cryptocurrencies": 1602, 
        "error": null
    }
]

Произошла ошибка

Ошибка: ошибка: не удается найти другой поддерживающий объект '[объект Object]' типа 'объект».NgFor поддерживает только привязку к итерациям, таким как массивы.(MarketPage.html 18) 

at NgForOf.ngOnChanges (VM5532 vendor.js:45147)
at checkAndUpdateDirectiveInline (VM5532 vendor.js:12781)
at checkAndUpdateNodeInline (VM5532 vendor.js:14309)
at checkAndUpdateNode (VM5532 vendor.js:14252)
at debugCheckAndUpdateNode (VM5532 vendor.js:15145)
at debugCheckDirectivesFn (VM5532 vendor.js:15086)
at Object.eval [as updateDirectives] (VM5623 MarketPage.ngfactory.js:56)
at Object.debugUpdateDirectives [as updateDirectives] (VM5532 vendor.js:15071)
at checkAndUpdateView (VM5532 vendor.js:14218)
at callViewAction (VM5532 vendor.js:14569)

Rest.ts 

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class RestProvider {

apiUrl = 'https://api.coinmarketcap.com/v2'; 

constructor(public http: HttpClient) {
console.log('Hello RestProvider Provider');
}

getAllCoinsListing() {
return new Promise(resolve => {
  this.http.get(this.apiUrl+'/listings').subscribe(data => {
    resolve(data);
  }, err => {
    console.log(err);
  });
});
}
}

Market.ts 

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { RestProvider } from '../../providers/rest/rest';

@Component({
  selector: 'page-market',
  templateUrl: 'market.html'
})
export class MarketPage {

  marketData: any;

  constructor(public navCtrl: NavController, public restProvider: 
           RestProvider) {
          this.getAllCoinsListing();
  }

  getAllCoinsListing() {
     this.restProvider.getAllCoinsListing()
     .then(data => {
      this.marketData = data;
     });
  }

}

MarketPage.html 

<ion-content>
    <ion-list inset>
         <ion-item *ngFor="let data of marketData">
             <h2>{{data.name}}</h2>
             <p>{{data.name}}</p>
         </ion-item>
     </ion-list>
 </ion-content>

1 Ответ

0 голосов
/ 24 июня 2018

рекомендуется использовать Observables over promises.При переходе к обещанию вы потеряете возможность отмены запроса и возможность связывать RxJS операторов.

Модифицированный код: 

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Injectable()
export class RestProvider {

apiUrl = 'https://api.coinmarketcap.com/v2/listings/'; 

constructor(public http: HttpClient) {
console.log('Hello RestProvider Provider');
}

getAllCoinsListing() {

 return this.http.get(this.apiUrl).map(res=>{return res['data']});//return data of result
}
}

Market.ts 

     import { Component } from '@angular/core';
        import { NavController } from 'ionic-angular';
        import { RestProvider } from '../../providers/rest/rest';

            @Component({
              selector: 'page-market',
              templateUrl: 'market.html'
            })
            export class MarketPage {

              marketData: Array<any>=[];
             //your API returns an array of object

              constructor(public navCtrl: NavController, public restProvider: 
                       RestProvider) {
                      this.getAllCoinsListing();
              }

             getAllCoinsListing() {
           this.restProvider.getAllCoinsListing().
        subscribe(data=>this.marketData=data);

  }

            }

Live Demo

...