How to transform JSON output from RapidAPI into an HTML table?

Other Questions RapidAPI
1

I’m trying to extract data from a JSON response provided by RapidAPI and show it in an HTML table. The API call seems to work since I can see the JSON data printing to the console. However, my table remains empty, and I can’t figure out why this is happening. Can anyone help me troubleshoot this issue?

$.ajax(settings).done(function(response){
  console.log(response);
});

The console log produces output, but I can’t get anything to populate in my table component. Here’s the complete code I’m working with:

<!DOCTYPE html>
<html>
<head>
  <title>Show API Data</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <table class="table table-striped" id="dataTable">
      <thead class="table-dark">
        <tr>
          <th>Country</th>
          <th>Confirmed Cases</th>
          <th>Total Deaths</th>
          <th>Region</th>
          <th>Recovered Cases</th>
          <th>New Deaths</th>
          <th>New Cases</th>
          <th>Critical Condition</th>
          <th>Cases per Million</th>
        </tr>
      </thead>
      <tbody id="tableBody">
      </tbody>
    </table>
  </div>

  <script>
    $(document).ready(function(){
      var settings = {
        "async": true,
        "crossDomain": true,
        "url": "your_rapidapi_url",
        "method": "GET",
        "headers": {
          "x-rapidapi-host": "your_host",
          "x-rapidapi-key": "your_key"
        }
      };
      
      $.ajax(settings).done(function(data){
        $.each(data.countryData, function(index, value){
          console.log(index);
          console.log(value);
          
          var newRow = "<tr>" + 
            "<td>" + value.countryName + "</td>" + 
            "<td>" + value.totalCases + "</td>" + 
            "<td>" + value.totalDeaths + "</td>" + 
            "<td>" + value.region + "</td>" + 
            "<td>" + value.recovered + "</td>" + 
            "<td>" + value.newDeaths + "</td>" + 
            "<td>" + value.newCases + "</td>" + 
            "<td>" + value.critical + "</td>" + 
            "<td>" + value.casesPerMillion + "</td>" + 
            "</tr>";
          $("#tableBody").append(newRow);
        });
      });
    });
  </script>
</body>
</html>

What might be causing the data not to show up in the table?

2

The issue’s probably your JSON structure assumptions. You can see data in console but nothing renders? That means data.countryData doesn’t exist in your response. Most RapidAPI endpoints return arrays directly or use different property names. Debug this by logging console.log(Object.keys(data)) to see what properties you actually have. Try iterating over data directly instead of data.countryData - lots of APIs return the array as the root element. Also watch out for CORS blocking your request in production even when console works. Double-check your API key and host headers.

3

check your json structure first - it might not be data.countryData but just data or wrapped differently. drop a console.log(data) before your each loop to see what you’re actually getting. also add .fail() error handling to catch any api errors that could be blocking the data.

4

Your JSON response structure probably doesn’t match what you’re expecting. Since you can see data in console but the table’s empty, you’re likely accessing the wrong data properties. Don’t assume data.countryData exists - log the actual structure with console.log(JSON.stringify(data, null, 2)) to see the exact format. Most RapidAPI endpoints return data with different property names or nest it under keys like results, data, or sometimes just return an array directly. Also check if your property names (value.countryName, value.totalCases) match what’s actually in the response - they might be camelCase, snake_case, or completely different. Add error handling and null checks too, because if any property is undefined it’ll break the entire loop silently.