角-无法使用Coinmarketcap获取数据

Question

我已经使用api "https://api.coinmarketcap.com/v2/ticker/“来显示所有当前价格和市值的硬币。Api包含如下所示的数据

  {
"data": {
    "1": {
        "id": 1, 
        "name": "Bitcoin", 
        "symbol": "BTC", 
        "website_slug": "bitcoin", 
        "rank": 1, 
        "circulating_supply": 17144525.0, 
        "total_supply": 17144525.0, 
        "max_supply": 21000000.0, 
        "quotes": {
            "USD": {
                "price": 6351.1, 
                "volume_24h": 3536780000.0, 
                "market_cap": 108886592728.0, 
                "percent_change_1h": -0.11, 
                "percent_change_24h": -0.4, 
                "percent_change_7d": -4.57
            }
        }, 
        "last_updated": 1531371457
    }, 
    "1027": {
        "id": 1027, 
        "name": "Ethereum", 
        "symbol": "ETH", 
        "website_slug": "ethereum", 
        "rank": 2, 
        "circulating_supply": 100636801.0, 
        "total_supply": 100636801.0, 
        "max_supply": null, 
        "quotes": {
            "USD": {
                "price": 441.823, 
                "volume_24h": 1359900000.0, 
                "market_cap": 44463653355.0, 
                "percent_change_1h": -0.23, 
                "percent_change_24h": 1.53, 
                "percent_change_7d": -6.71
            }
        }, 
        "last_updated": 1531371451
    }, 
    "52": {
        "id": 52, 
        "name": "XRP", 
        "symbol": "XRP", 
        "website_slug": "ripple", 
        "rank": 3, 
        "circulating_supply": 39262444717.0, 
        "total_supply": 99991916481.0, 
        "max_supply": 100000000000.0, 
        "quotes": {
            "USD": {
                "price": 0.445663, 
                "volume_24h": 171535000.0, 
                "market_cap": 17497818900.0, 
                "percent_change_1h": -0.16, 
                "percent_change_24h": -0.28, 
                "percent_change_7d": -9.26
            }
        }, 
        "last_updated": 1531371500
         ....

这是我的密码

got-http.service.ts

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import {Http, Response} from '@angular/http';
 import { Observable } from 'rxjs';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/map';
 import { HttpErrorResponse } from "@angular/common/http";


 @Injectable()
 export class GotHttpService {
 private baseUrl = 'https://api.coinmarketcap.com/v2/ticker' 
 constructor(private _http: HttpClient) {
  }


      getDetails(): any {
            let myResponse = this._http.get(this.baseUrl);
            return myResponse;



      }
  }

app.component.ts

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Location } from '@angular/common';          
 import { GotHttpService } from './got-http-service.service';
 import { Pipe, PipeTransform } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http'; 

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
 })
 export class AppComponent {
 details: any;
 constructor(private _route: ActivatedRoute, private router: Router, 
 private gotHttpService: GotHttpService , private location: Location) 
 { 
  }

ngOnInit() {
this.gotHttpService.getDetails().subscribe(
          data => {

            this.details = data;
}
)}}

app.component.html

 <div *ngFor="let key of details">
{{key.name}}
{{key.USD.price}}
{{key.USD.market_cap}}


</div>

但是没有任何东西显示为输出。然而，我没有收到任何错误，但我仍然没有得到我的屏幕上获取的数据。

Answer 1

首先，您的数据不在数组中，它包含一个对象，您需要通过键将其转换为数组：

您需要像这样声明一个details数组

details: Array<any> = [];

在您的订阅者方法中，应该是：

 this.gotHttpService.getDetails().subscribe(
      data => {

        // Step 1. Get all the object keys.
        let tmpAllKeys = Object.keys(data.data);
        // Step 2. Create an empty array.
        let tmpArray = [];
        // Step 3. Iterate throw all keys.
        for (let prop of tmpAllKeys) { 
            tmpArray.push(data.data[prop]);
        }
        this.details = tmpArray;

    });

在你的html中：

<div *ngFor="let key of details">
    {{key.name}} {{key.quotes?.USD?.price}} {{key.quotes?.USD?.market_cap}}
</div>

下面是工作示例：显示数据