Converting JSON API response to HTML table format using RapidAPI

Other Questions RapidAPI
1

Issue with displaying API data in table format

I’m working on a project where I need to fetch data from a RapidAPI endpoint and display it in an HTML table. The console shows the JSON response correctly, but nothing appears in my table. I’ve been stuck on this for days and can’t figure out what’s wrong.

// API configuration
var apiConfig = {
    "async": true,
    "crossDomain": true,
    "url": "your_rapidapi_endpoint",
    "method": "GET",
    "headers": {
        "x-rapidapi-host": "your_host_url",
        "x-rapidapi-key": "your_key_here"
    }
};

// Fetch and process data
$.getJSON(apiConfig, function(result){
    $.each(result.statistics, function(index, item){
        var rowHtml = "<tr>" + 
            "<td>" + item.nation + "</td>" + 
            "<td>" + item.confirmed + "</td>" + 
            "<td>" + item.fatalities + "</td>" + 
            "<td>" + item.area + "</td>" + 
            "<td>" + item.recovered + "</td>" + 
            "</tr>";
        $(rowHtml).appendTo("#dataTable tbody");
    });
});

The console.log works fine and shows the JSON data, but the table remains empty. What could be causing this problem?

2

First, check if your table’s actually in the DOM when the AJAX call runs. The script might be loading before the table element’s ready, so appendTo fails silently. Wrap your code in $(document).ready() or add console logs to check if ($(‘#dataTable tbody’).length) > 0

3

Check your API response structure first. You’re looping through result.statistics but RapidAPI endpoints often nest data differently. Drop in console.log(result) to see what you’re actually getting - the data might be in result.data or just result directly. If fields like item.nation or item.confirmed are undefined, you’ll get empty cells. I hit this switching between COVID APIs where one used ‘country’ instead of ‘nation’. Add validation like item.nation || 'N/A' for missing fields. Your table structure looks fine, so it’s probably a data access problem.

4

Had the same issue! Your problem is $.getJSON() - it doesn’t support custom headers, but RapidAPI needs those x-rapidapi-host and x-rapidapi-key headers. Even though you’ve got them in your config object, $.getJSON() just ignores them completely. Switch to $.ajax() and pass your whole config object to it. I made this exact mistake and wasted hours debugging before I figured out the headers weren’t even being sent. Your API calls are probably failing silently, which is why your table stays empty even though the config looks right. $.ajax() will actually handle the headers and authentication that RapidAPI needs.