Как динамически добавлять строки в таблицу HTML из данных, полученных из внешнего API? - PullRequest
Новая
       50

Как динамически добавлять строки в таблицу HTML из данных, полученных из внешнего API?

0 голосов
/ 09 июля 2020

Я новичок в JavaScript, не уверен, что это самый базовый c вопрос. Я пытаюсь создать панель управления Covid-19, используя данные, полученные из внешнего API. Мне удалось получить данные из API. Я могу добавлять строки (одну за другой) из JavaScript без каких-либо проблем. Но есть около 186 стран, я не уверен, как мне динамически перенести sh данные строки в таблицу HTML. Я попытался перебрать массив, но все равно не могу продолжить.

Я предоставил приведенные ниже фрагменты кода, а также внешний API, откуда я извлекаю данные.

Пожалуйста, позвольте мне знаю, как мне динамически вставлять строку в таблицу HTML для всех стран. Заранее большое спасибо.

Текущий выход: https://i.imgur.com/4wywYmJ.png

Внешний API: https://api.covid19api.com/summary

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Covid 19 Summary</title>
  </head>
  <body>
    <div class="container">
      <h1 class="text-center mt-5">Covid 19 Live Summary in Table format</h1>
      <table class="table table-sm table-hover" id="table1">
        <thead>
          <tr>
            <th scope="col">Country</th>
            <th scope="col">Total Cases</th>
            <th scope="col">Total Deaths</th>
            <th scope="col">Total Recovered</th>
          </tr>
        </thead>
        <tbody>
          <tr id="data"></tr>
        </tbody>
      </table>
      <br />
      <button class="btn btn-info btn-block btn-primary btn-lg" id="refresh">
        Refresh Data
      </button>
    </div>
    <script src="app.js"></script>
  </body>
</html>

Javascript

window.addEventListener('load', () => {
    let api = "https://api.covid19api.com/summary";
    let table = document.getElementById("data");
    var table1 = document.getElementById("table1");
    const refresh = document.getElementById("refresh");
    const countries = [];
    console.log(table1);

    initialize();
    function initialize() {
        fetch(api).then(response => {
            // console.log(response);
            return response.json();
        }).then(data => {
            countries.push(...data.Countries);
            console.log(countries);
            console.log(countries[1].Country);

            for (i = 0; i < countries.length; i++) {
                console.log(countries[i]);
            }
            var row = table1.insertRow(2);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);
            cell1.innerHTML = countries[1].Country;
            cell2.innerHTML = countries[1].TotalConfirmed;
            cell3.innerHTML = countries[1].TotalDeaths;
            cell4.innerHTML = countries[1].TotalConfirmed;
        }
        );
    }
    refresh.addEventListener('click', () => {
        table.innerHTML = '';
        initialize();
    })

});

CSS: 

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap");

tr,
td {
  text-align: center;
}

body {
  font-family: "Oswald", sans-serif;
}

1 Ответ

2 голосов
/ 09 июля 2020

Итерация по странам работает нормально. Попробуйте это: 

function initialize() {
  fetch(api)
    .then(response => {
      // console.log(response);
      return response.json();
    })
    .then(data => {
      countries.push(...data.Countries);
      console.log(countries);
      console.log(countries[1].Country);

      for (var i = 0; i < countries.length; i++) {
        var country = countries[i];
        var row = table1.insertRow(-1); // -1 to append at end of table
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        cell1.innerHTML = country.Country;
        cell2.innerHTML = country.TotalConfirmed;
        cell3.innerHTML = country.TotalDeaths;
        cell4.innerHTML = country.TotalConfirmed;
      }
    });
}
...