Converting JSON API response to HTML table format - no data displaying

Other Questions RapidAPI
1

I’m working on displaying API data from a third-party service in an HTML table but running into issues. The JSON response comes through fine when I log it to console, but nothing shows up in my table.

// This works and shows data in console
$.ajax(apiConfig).done(function(result){ 
    console.log(result); 
});

I can see the data in browser console but the table remains empty. Been stuck on this for a while now.

<!DOCTYPE html>
<html>
<head>
    <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>
    <table class="table" id="dataTable">
        <thead>
            <tr>
                <th>Nation</th>
                <th>Total Cases</th>
                <th>Fatalities</th>
                <th>Area</th>
                <th>Recovered</th>
                <th>Recent Deaths</th>
                <th>Recent Cases</th>
                <th>Critical</th>
                <th>Per Million</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script>
        $(document).ready(function(){
            var apiConfig = {
                "async": true,
                "url": "api_endpoint",
                "method": "GET",
                "headers": {
                    "x-rapidapi-host": "host_name",
                    "x-rapidapi-key": "api_key_here"
                }
            };
            
            $.getJSON(apiConfig, function(response){
                $.each(response.statistics, function(index, item){
                    console.log(index);
                    console.log(item);
                    
                    var row = "<tr>" + "<td>" + item.nation + "</td>" + "<td>" + item.total + "</td>" + "<td>" + item.fatalities + "</td>" + "<td>" + item.area + "</td>" + "<td>" + item.recovered_total + "</td>" + "<td>" + item.recent_deaths + "</td>" + "<td>" + item.recent_total + "</td>" + "<td>" + item.critical_cases + "</td>" + "<td>" + item.per_million + "</td>" + "</tr>";
                    $(row).appendTo("#dataTable tbody");
                });
            });
            
            var row = "<tr>" + "<td>" + item.nation + "</td>" + "<td>" + item.total + "</td>" + "<td>" + item.fatalities + "</td>" + "<td>" + item.area + "</td>" + "<td>" + item.recovered_total + "</td>" + "<td>" + item.recent_deaths + "</td>" + "<td>" + item.recent_total + "</td>" + "<td>" + item.critical_cases + "</td>" + "<td>" + item.per_million + "</td>" + "</tr>";
            $(row).appendTo("#dataTable tbody");
        });
    </script>
</body>
</html>

What could be preventing the table from populating with the API data?

2

The main issue is that duplicate row creation line at the bottom trying to use item outside its scope. But debugging API data transformation gets messy fast.

I’d skip wrestling with jQuery callbacks and manual DOM stuff - just automate the whole process. Set up a workflow that fetches your API data, transforms it into the HTML table format you need, and handles errors automatically.

I’ve dealt with similar issues where APIs change their response structure or field names without warning. An automated pipeline that adapts and alerts you when something breaks beats manual JavaScript parsing every time.

You can create a workflow that monitors your API endpoint, processes the JSON, generates the HTML table, and handles fallback scenarios when the API’s down. Plus you get built-in logging so you know exactly what’s happening.

This eliminates the guesswork and gives you something that actually works consistently: https://latenode.com

3

everyone’s right about the scope issue, but first check your browser’s dev tools network tab - you’re probably getting a 401 or 403. rapidapi endpoints are picky about headers and $.getJSON strips them out. switch back to $.ajax with your original apiConfig and see if the request goes through.

4

you’ve got that duplicate row creation outside the ajax callback - the var row = ... line at the bottom is trying to use item but it’s not in scope there. also, double-check if your api response actually has a statistics array. might be named something else.

5

You mixed up your AJAX calls - $.getJSON() only takes a URL and optional data, not objects with headers and method properties. Those headers won’t work since $.getJSON() is just for simple GET requests. Stick with $.ajax() like your console example, or use $.get() if you don’t need the RapidAPI headers. That extra row creation at the bottom will break too since item doesn’t exist outside the callback. Just remove that line and use the $.ajax() setup that was already working.

6

There’s a scope issue with that stray row creation code, but the real problem’s probably somewhere else. I’ve hit this before - usually the API response structure doesn’t match what you expect. Your code assumes response.statistics exists, but if that property’s missing or named differently, the each loop never runs. Log Object.keys(response) first to see what you’re actually getting. Also check the network tab for CORS errors - third-party APIs love blocking cross-origin requests from browsers. If that’s it, you’ll need to proxy through your server or use JSONP if they support it. The console might show the response even when the request fails silently.