表中显示json数据

Question

I want to show ajax URL data shows into the HTML table, and I don't know why it shows me undefined help me I couldn't find out the error

$.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>

but it shows me undefined

</div>

Answer 1

All the country data is in an object that is the first element of the array, access it like this:

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>

</div>