Есть json ресурс https://api.exchangeratesapi.io/latest Как с помощью js в html странице сделать загрузку c ресурса и отображение данных в виде таблицы по нажатию на button на странице.
Ожидаемый результат Таблица
Валюта/Eur, Курс
Есть json ресурс https://api.exchangeratesapi.io/latest Как с помощью js в html странице сделать загрузку c ресурса и отображение данных в виде таблицы по нажатию на button на странице.
Ожидаемый результат Таблица
Валюта/Eur, Курс
const fetchData = async(url) => {
const res = await fetch(url);
if (!res.ok) {
throw new Error(`Could not fetch ${url}, received ${res.status}`)
}
return await res.json();
}
const createRow = (currency, value) => {
const tr = document.createElement('tr');
const valueTD = document.createElement('td');
const currencyTD = document.createElement('td');
valueTD.innerText = value;
currencyTD.innerText = currency;
tr.append(currencyTD, valueTD);
return tr;
}
document.querySelector('button').addEventListener('click', _ => {
const table = document.querySelector('.data tbody');
fetchData('https://api.exchangeratesapi.io/latest')
.then(({"rates" : rates}) => {
Object.keys(rates).forEach(rate => {
table.append(createRow(rate, rates[rate]));
});
});
});
<table class="data">
<thead>
<tr>
<th>Currency</th>
<th>Value</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button>Fetch</button>