Angular: Вывод данных с API в обьекты компоненты

Question

Как правильно записать из массива обьектов данные с API (в моей случае это информация о курсе нескольких валют). Нужно сделать отображение курса валют и конвертер. В моем понимании я должен каждую валюту занести как обьект в отдельную переменную. По апи передаются данные в таком виде:

[
{
"ccy": "USD",
"base_ccy": "UAH",
"buy": "29.25490",
"sale": "32.18000"
},
{
"ccy": "EUR",
"base_ccy": "UAH",
"buy": "31.67870",
"sale": "34.90000"
},
{
"ccy": "BTC",
"base_ccy": "USD",
"buy": "40479.1555",
"sale": "44740.1193"
}
]

С помощью HttpClient через get разобрался занес весь массив обьектов в переменную response, и в этой же функции вытянул данные о курсах купли продажи каждой валюты в разные переменные, понимаю что это не правильно но не пойму как правильно оформить это все. мой код

export class ExchangeRateComponent implements OnInit {


  response: any ;
currentUSDBuy: any;
currentUSDSale: any;
currentEURBuy: any;
currentEURSale: any;
  constructor(private http: HttpClient) {
  }

  ngOnInit() {
    this.http.get('https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5')
    .subscribe(data => {
      this.response = data

      this.currentUSDBuy = Number(this.response[0].buy).toFixed(2)
      this.currentUSDSale = Number(this.response[0].sale).toFixed(2)
      this.currentEURBuy = Number(this.response[1].buy).toFixed(2)
      this.currentEURSale = Number(this.response[1].sale).toFixed(2)


    })
  }
Подскажите правильный метод

Answer 1

По коду хотелось бы озвучить несколько проблем:

Вычитку с бэка лучше делать в сервисах.
Данные записывать в объект типа Subject или ему подобные.
Если вы подписываетесь на что-то, то вам нужно отписаться, в запросах я обычно пишу .pipe(take(1)).

По вашей проблеме:

Вам нужно запомнить все данные с API в таком же массиве объектов, потом будет удобнее их проитерировать и показать. теперь код.

Определяем тип, который придет с API для удобства

export type APIRateType = {
    ccy: string,
    base_ccy: string,
    buy: string,
    sale: string
}

Определяем тип для фронта

export type RateType = {
    ccy: string,
    base_ccy: string,
    buy: number,
    sale: number
}

Создаем сервис который будет отвечать за получение валют с API

@Injectable()
export class ExchangeRateService {
    constructor(private httpClient: HttpClient){}

    getCurrentRate$(): Observable<RateType[]> {
        return this.httpClient
            .get<APIRateType>('https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5')
            .pipe(
                map(arrayRateFromAPI => arrayRateFromAPI.map(rateFromAPI => ({
                   ccy: rateFromAPI.ccy,
                   base_ccy: rateFromAPI.base_ccy,
                   buy: Number(rateFromAPI.buy).toFixed(2),
                   sale: Number(rateFromAPI.sale).toFixed(2)                
                }))),
                take(1)
            );
    }
}

Теперь сам компонент

@Component({
  selector: 'al-newsletter-create',
  templateUrl: './newsletter-create-partial.component.html',
  providers: [
    ExchangeRateService
  ],
})
export class ExchangeRateComponent implements OnInit {
    rates$: Observable<RateType[]>;

    constructor(private exchangeRateService: ExchangeRateService){
        this.rates$ = getCurrentRate$();
    }
}

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

<div class="rates-container">
    <div *ngFor="let rate of rates | async">
        <span>{{rate.ccy}}</span>
        <span>{{rate.base_ccy}}</span>
        <span>{{rate.buy}}</span>
        <span>{{rate.sale}}</span>
    </div>
</div>

БЛОГ НА HUSL

Angular: Вывод данных с API в обьекты компоненты

Ответы (1 шт):