Іноді виникає необхідність показувати або конвертувати курс гривні щодо іноземної валюти. Значення курсу мати як константу не коректно так як курс змінюється і змінювати значення вручну також не вихід.
Розглянемо як отримати офіційний курс гривні від НБУ (Національного Банку України) за допомогою AJAX.
var ajax=new XMLHttpRequest();
ajax.open('GET', 'https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?json');
ajax.onload=function(){
alert( this.responseText);
};
ajax.send(null);
var el=document.getElementById('result');
var ajax=new XMLHttpRequest();
ajax.open('GET', 'https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?json');
ajax.responseType='json';
ajax.onload=function(){
var s='<table align="center">';
for(var i=0;i<this.response.length;i++)
s+='<tr><td>'+this.response[i].txt+'</td><th>'+this.response[i].cc+'</th><td>'+this.response[i].rate+'</td></tr>';
s+='</table>';
el.innerHTML=s;
};
ajax.send(null);
Реалізуємо функцію яка приймає два параметра: CSS селектор елемента у якому показати результат і масив валют. Значення курсу виводимо у форматі два числа після коми за допомогою метода Number.toFixed().
function kyrsNBU(el, cc){
el=document.querySelector(el);
if(el==null){el=document.createElement('div');
document.body.appendChild(el);};
if(cc==undefined)cc=['USD','EUR','PLN'];
var ajax=new XMLHttpRequest();
ajax.open('GET', 'https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?json');
ajax.responseType='json';
ajax.onload=function(){
var s='';
for(var i=0; i<this.response.length;i++)
for(var j=0;j<cc.length;j++){
if(this.response[i].cc==cc[j])
s+='<div><b title="'+this.response[i].txt+'">'+this.response[i].cc+'</b> : '+this.response[i].rate.toFixed(2)+'</div>';
}
el.innerHTML=s;
}
ajax.send(null);
}
kyrsNBU('#result2',['USD','EUR']);
Конвертація валюти по курсу НБУ
Створюємо конвектор валют на JavaScript за курсом НБУ.
<div><select id="valuta1" onchange="convertNBU();"></select> <button onclick="moveValuta();">⮀</button> <select id="valuta2" onchange="convertNBU()"></select></div>
<div><input id="res_valuta1" oninput="convertNBU();" size="10"> <input id="res_valuta2" size="10" disabled></div>
moveValuta=function(){
var valuta1=document.getElementById('valuta1'), valuta2=document.getElementById('valuta2'), tmp= valuta1.selectedIndex;
valuta1.selectedIndex=valuta2.selectedIndex;
valuta2.selectedIndex=tmp;
convertNBU();
}
convertNBU=function(){
var valuta1=document.getElementById('valuta1'), valuta2=document.getElementById('valuta2'), input1=document.getElementById('res_valuta1'), input2=document.getElementById('res_valuta2');
var res, k1=window.kurs[valuta1.value], k2=window.kurs[valuta2.value];
res=(k1*res_valuta1.value)/k2;
input2.value=res.toFixed(2);
}
showConvert=function(cc){
if(cc==undefined)cc=['USD','EUR','PLN'];
cc.push('UAN');
var ajax=new XMLHttpRequest();
ajax.open('GET', 'https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?json');
ajax.responseType='json';
ajax.onload=function(){
window.kurs={'UAN':1};
for(var i=0; i<this.response.length;i++){
kurs[this.response[i].cc]=this.response[i].rate;
}
var s='';
for(var i=0;i<cc.length;i++)
s+='<option value="'+cc[i]+'">'+cc[i]+'</option>';
document.getElementById('valuta1').innerHTML=s;
document.getElementById('valuta2').innerHTML=s;
}
ajax.send(null);
}
showConvert(['USD','EUR', 'PLN', 'CAD']);