1

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

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

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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