1

Есть json ресурс https://api.exchangeratesapi.io/latest Как с помощью js в html странице сделать загрузку c ресурса и отображение данных в виде таблицы по нажатию на button на странице.

Ожидаемый результат Таблица

Валюта/Eur, Курс

2
  • При помощи AJAX запроса. В JS скрипте делаете AJAX запрос на данный ресурс, получаете JSON ответ, при помощи JSON.parse() преобразуете его в JS объект, затем циклом любым обходите этот объект и генерируете разметку в нужном формате, вставляя туда необходимые данные.
    – Gonzo
    24 сен 2019 в 8:42
  • 3
    Используйте Fetch, Jq Ajax, Xmlhttprequest, что угодно, получаете ответ в виде JSON и делаете с ним что хотите
    – user298256
    24 сен 2019 в 8:43

1 ответ 1

4

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>

Ваш ответ

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

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