json данные показывают в таблице

Question

Я хочу показать ajax Данные URL-адресов отображаются в таблице HTML, и я не знаю, почему они показывают мне неопределенные, помогите мне, я не смог найти ошибку

$.ajax({
  url: 'https://api.thevirustracker.com/free-api?countryTotals=ALL',
  dataType: 'json',
  success: function(data) {
    for (let i = 0, n = data.countryitems.length; i < n; i++) {
      const entries = data.countryitems[i]
      Object.keys(entries).forEach(key => {
        console.log(key, entries[key])
        document.getElementById('table').innerHTML =
`<table class="table table-striped">
  <thead>
    <tr>
    <th scope="col">#</th>
    <th scope="col">Country Name</th>
    <th scope="col">Infected</th>
    <th scope="col">Recovered</th>
    <th scope="col">Unresolved</th>
    <th scope="col">Deaths</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <th scope="row">${key,entries[key].ourid}</th>
    <td>${key,entries[key].title}</td>
    <td>${key,entries[key].total_cases}</td>
    <td>${key,entries[key].total_recovered}</td>
    <td>${key,entries[key].total_unresolved}</td>
    <td>${key,entries[key].total_deaths}</td>
    </tr>
  </tbody>
</table>`
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col" id="table"></div>
</div>

но это показывает меня неопределенным

Answer 1

Все данные о стране находятся в объекте, который является первым элементом массива , доступ к нему осуществляется следующим образом:

const entries = data.countryitems[0];

$.ajax({
  url: 'https://api.thevirustracker.com/free-api?countryTotals=ALL',
  dataType: 'json',
  success: function(data) {

    // Access the data with [0]
    const entries = data.countryitems[0];
    
    // Create an element to store the content you will create
    let html = '';

    Object.keys(entries).forEach(key => {
    
    // The last object on entries is 'stat': 'ok' don't add it
    if (key !== 'stat') {

        // Add content to the element, not to the DOM
        html +=
          `<tr>
           <th scope="row">${key,entries[key].ourid}</th>
           <td>${key,entries[key].title}</td>
           <td>${key,entries[key].total_cases}</td>
           <td>${key,entries[key].total_recovered}</td>
           <td>${key,entries[key].total_unresolved}</td>
           <td>${key,entries[key].total_deaths}</td>
         </tr>`;
        
      } 
    });

    // Add all the content to the DOM at once, only one redraw
    document.getElementById('t-body').innerHTML = html;

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Country Name</th>
      <th scope="col">Infected</th>
      <th scope="col">Recovered</th>
      <th scope="col">Unresolved</th>
      <th scope="col">Deaths</th>
    </tr>
  </thead>
  <tbody id="t-body"></tbody>
</table>