Current exchange rate using Angular-CodePudding

I want to make a currency converter and also display the current exchange rate (dollar and euro) against the hryvnia, I made the converter myself, but I'm racking my brains with the exchange rate.

<div>
  <p > 1 USD <span>=</span> {{}}</p>
  <p>1 EUR <span>=</span> {{}}</p>
</div>
<div >
  <div >
    <input #c3  min="1" type="text" (mouseleave)="amounts(c3.value)" required>
    <select #c1 name="" id="country1" (mouseleave)="changebase(c1.value)">
      <option value="USD">US dollar</option>
      <option value="EUR">Euro</option>
      <option value="UAH">Ukranian Grivna</option>
    </select>
    <p>  to </p>

    <select #c2  name="" id="country1" (mouseleave)="tocountry(c2.value)">
      <option value="USD">US dollar</option>
      <option value="EUR">Euro</option>
      <option value="UAH">Ukranian Grivna</option>
    </select>
  </div>
  <button (click)="convert()"> Submit</button>
  <div >
    <p>{{base}} <span>=</span>{{result}} {{cont2}}</p>


  </div>
</div>

In the first div, I want to display the current exchange rate

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

@Injectable({
providedIn: 'root'
})
export class CurrencydataService {

constructor(private http:HttpClient) { }
getcurrencydata(country1:string){
let url ="https://api.exchangerate.host/latest?base=USD" country1
return this.http.get(url)
}
}

my server request

import { Component } from '@angular/core';
import { CurrencydataService } from './currencydata.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: \['./app.component.css'\]
})
export class AppComponent {
title = 'my-app';
currjson:any =\[\];

curencyuds = "USD";
currencyeur ="EUR"

base ="USD";
cont2="USD";
result:any = \[\];
amount:any = \[\];

changebase(a:string){
this.base =a;
console.log(this.base)
}
tocountry(b:string){
this.cont2 = b;
console.log(this.cont2)

}

amounts(c:string){
this.amount = c;
console.log(this.amount)

}

constructor(private currency:CurrencydataService){}
convert(){

    console.log(this.base)
    console.log(this.cont2)
    console.log(this.amount)
    
    
    
    this.currency.getcurrencydata(this.base).subscribe(data=>{
      this.currjson= JSON.stringify(data);
      this.currjson= JSON.parse(this.currjson);
      this.amount = JSON.parse(this.amount)
     // this.current =JSON.parse(this.currjson.rates.UAH)
    
    
     console.log(this.result)
     console.log(this.currjson.rates)
     console.log(this.currjson)
    
    
    
    
      if (this.cont2 ==="USD"){
        this.result = this.currjson.rates.USD * (this.amount)
    
      }
    
    
      if (this.cont2 ==="EUR"){
        this.result = this.currjson.rates.EUR * (this.amount)
      }
    
    
      if (this.cont2 ==="UAH"){
        this.result = this.currjson.rates.UAH * (this.amount)
      }
    })

}
}

The logic of my converter.

Please tell me how to extract the data correctly and get the current hryvnia exchange rate against the euro and the dollar

CodePudding user response：

You need to fetch the exchange rates when the component initialises

Add a new method in the service that gets all exchange rates for a single currency.
In ngOnInit fetch all the exchange rates for UAH.
Assign the exchange value to variables and display then in the template.

Hope this helps

<div>
  <p>1 USD <span>=</span> {{uahToUsd}} UAH</p>
  <p>1 EUR <span>=</span> {{uahToEur}} UAH</p>
</div>

// Service

export class CurrencydataService {
  constructor(private http: HttpClient) {}
  getcurrencydata(country1: string) {
    let url = 'https://api.exchangerate.host/latest?base=USD'   country1;
    return this.http.get(url);
  }

  getBaseCurrencyData(country1: string) {
    let url = 'https://api.exchangerate.host/latest?base='   country1;
    return this.http.get(url);
  }
}


// Component
export class AppComponent implements OnInit {

  currjson: any = [];

  curencyuds = 'USD';
  currencyeur = 'EUR';
  currencyuah = 'UAH';

  uahToUsd = 0;
  uahToEur = 0;

  ngOnInit() {
    this.getBaseRates();
  }

  getBaseRates() {
    this.currency
      .getBaseCurrencyData(this.currencyuah)
      .subscribe((data: any) => {
        const rates = data.rates;

        this.uahToUsd = 1/rates[this.curencyuds]
        this.uahToEur = 1/rates[this.currencyeur]
      });
  }

  ... // Rest of your code
}