Issue
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 class="main-container">
<div class="selection-container">
<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 class="result-container">
<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
Solution
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
}
Answered By - Mr. Stash
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.