在角度6中从JSON API获取数组值

Question

API

{"Data":[{"SYMBOL":"XBTUSD","SUPPLY":0,"FULLNAME":"XBTUSD","NAME":"XBTUSD","ID":-1,"VOLUME24HOURTO":1666015703.2591257},{"SYMBOL":"BTC","SUPPLY":17294062,"FULLNAME":"Bitcoin (BTC)","NAME":"Bitcoin","ID":"1182","VOLUME24HOURTO":487020997.4281679},{"SYMBOL":"ETH","SUPPLY":102248936.0928,"FULLNAME":"Ethereum (ETH)","NAME":"Ethereum","ID":"7605","VOLUME24HOURTO":189913859.14174834}],
"Type":100,
"Response":"Success",
"VolSymbol":"USD",
"Message":"All ok"}

Data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})


export class DataService {
  Data:any;

constructor(private _http: HttpClient) {}

getTop() {
    return this._http.get("https://min-api.cryptocompare.com/data/top/volumes?tsym=USD&limit=4")
    .pipe(map(result => this.Data = result));
  }
}

prices.component.ts

export class PricesComponent implements OnInit {

cryptos: Array<Object>;

  constructor(private dataService: DataService) 
{
    this.dataService.getTop().subscribe(res => {
      this.cryptos = res.Data;
      console.log(res);
    });

  }

  ngOnInit() {
  }

}

I want to fetch All Data Values listed in that Array. I am getting error in prices.component.ts as it is unable to read the value Data.

I am also not sure how to loop the values in Data and print the corresponding objects in html file. I want Something similar in html file:

SYMBOL:"BTC"

SUPPLY:17294062

FULLNAME:"Bitcoin

VOLUME24HOURTO":487020997.4281679

SYMBOL:"ETH"

SUPPLY:102248936.0928

FULLNAME:"Ethereum

VOLUME24HOURTO:189913859.14174834

Answer 1

Your issue with .Data may be solved with res['Data'] . Also, for looping in html try:

in ts:

this.map = {}
for (key in res['Data']) {
   let el = {}
   el['key'] = key
   el['val'] = res['Data'][key]
   this.map.push(el)
}

in html:

<div *ngFor="let el in map">
   {{el.key}}: {{el.value}}
</div> 

Answer 2

1) DataService

ng g s Data

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})


export class DataService {
  Data:any;

constructor(private _http: HttpClient) {}

getTop() {
    return this._http.get<any>("https://min-api.cryptocompare.com/data/top/volumes?tsym=USD&limit=4");
  }
}

2) AppModule.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { PricesComponent } from './prices/prices.component';

const appRoutes: Routes = [
  { path: '', component: PricesComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    PricesComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3) PricesComponent.ts

ng g c Prices

import { Component, OnInit } from '@angular/core';
import {DataService} from '../data.service'

@Component({
  selector: 'app-prices',
  templateUrl: './prices.component.html',
  styleUrls: ['./prices.component.css']
})
export class PricesComponent implements OnInit {

  cryptos:any;

  constructor(private dataService: DataService) 
  {
    this.dataService.getTop().subscribe(res => {
      this.cryptos = res['Data'];
      console.log(this.cryptos);
    });

  }

  ngOnInit() {
  }

}

4) Pricecomponent.html

<div *ngFor="let el of cryptos">
  FULLNAME {{el.FULLNAME}}--
  SYMBOL {{el.SYMBOL}}--
  SUPPLY {{el.SUPPLY}}--
  NAME {{el.NAME}}--
  VOLUME24HOURTO {{el.VOLUME24HOURTO}}
</div>  

5) AppComponent.html

<router-outlet></router-outlet>