title: How to add rows into HTML table dynamically from the data fetched from external API?
body: <p>I am new to JavaScript, not sure if this very basic question. I am trying to create a Covid-19 dashboard using the data fetched from the external API. I managed to get the data from the API. I can able to add rows(one by one) from JavaScript without any issues. But, there are around 186 countries, I am not sure how should I push the row data into a HTML table dynamically. I tried to iterate the array but still I am not able to proceed.</p>
  <p>I have provided the code snippets below as well as external API from where I am pulling the data.</p>
  <p>Please let me know how should I insert the row dynamically into a HTML table for all the countries. Thank you so much in advance.</p>
  <p><strong>Current Output:</strong> <a href="https://i.imgur.com/4wywYmJ.png" rel="nofollow noreferrer">https://i.imgur.com/4wywYmJ.png</a></p>
  <p><strong>External API:</strong> <a href="https://api.covid19api.com/summary" rel="nofollow noreferrer">https://api.covid19api.com/summary</a></p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;link
        rel=&quot;stylesheet&quot;
        href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css&quot;
        integrity=&quot;sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO&quot;
        crossorigin=&quot;anonymous&quot;
      /&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; /&gt;
      &lt;title&gt;Covid 19 Summary&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;h1 class=&quot;text-center mt-5&quot;&gt;Covid 19 Live Summary in Table format&lt;/h1&gt;
        &lt;table class=&quot;table table-sm table-hover&quot; id=&quot;table1&quot;&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th scope=&quot;col&quot;&gt;Country&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Total Cases&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Total Deaths&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Total Recovered&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr id=&quot;data&quot;&gt;&lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
        &lt;br /&gt;
        &lt;button class=&quot;btn btn-info btn-block btn-primary btn-lg&quot; id=&quot;refresh&quot;&gt;
          Refresh Data
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>Javascript</strong></p>
  <pre><code>window.addEventListener('load', () =&gt; {
      let api = &quot;https://api.covid19api.com/summary&quot;;
      let table = document.getElementById(&quot;data&quot;);
      var table1 = document.getElementById(&quot;table1&quot;);
      const refresh = document.getElementById(&quot;refresh&quot;);
      const countries = [];
      console.log(table1);
  
      initialize();
      function initialize() {
          fetch(api).then(response =&gt; {
              // console.log(response);
              return response.json();
          }).then(data =&gt; {
              countries.push(...data.Countries);
              console.log(countries);
              console.log(countries[1].Country);
  
              for (i = 0; i &lt; 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', () =&gt; {
          table.innerHTML = '';
          initialize();
      })
  
  });
  </code></pre>
  <p><strong>CSS:</strong></p>
  <pre><code>@import url(&quot;https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&amp;display=swap&quot;);
  
  tr,
  td {
    text-align: center;
  }
  
  body {
    font-family: &quot;Oswald&quot;, sans-serif;
  }
  </code></pre>