0

Как правильно записать из массива обьектов данные с 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)


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

1 ответ 1

1

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

  1. Вычитку с бэка лучше делать в сервисах.
  2. Данные записывать в объект типа Subject или ему подобные.
  3. Если вы подписываетесь на что-то, то вам нужно отписаться, в запросах я обычно пишу .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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.