I’m having trouble displaying API data from a JSON response into an HTML table. The code runs without errors and I can see the JSON data in the console log, but nothing appears in my table. I’ve been stuck on this for a while now and can’t figure out what’s wrong.
$(document).ready(function(){
var apiConfig = {
"async": true,
"crossDomain": true,
"url": "api_endpoint_url",
"method": "GET",
"headers": {
"x-rapidapi-host": "host_name",
"x-rapidapi-key": "api_key_here"
}
};
$.getJSON(apiConfig, function(result){
$.each(result.statistics, function(index, item){
console.log(index);
console.log(item);
var tableRow = "<tr>" + "<td>" + item.nation + "</td>" + "<td>" + item.confirmed + "</td>" + "<td>" + item.fatalities + "</td>" + "<td>" + item.area + "</td>" + "<td>" + item.recovered + "</td>" + "<td>" + item.recent_deaths + "</td>" + "<td>" + item.recent_cases + "</td>" + "<td>" + item.critical + "</td>" + "<td>" + item.per_million + "</td>" + "</tr>";
$(tableRow).appendTo("#dataTable tbody");
});
});
});
The console.log shows the data correctly but the table remains empty. What could be causing this issue?
You’re stuck debugging manual API parsing and jQuery DOM stuff - I’ve been there and it sucks.
Don’t fix the JavaScript mess. Just automate it. I deal with tons of API-to-HTML conversions and stopped writing custom code for this years ago.
Build a workflow that grabs your API data, transforms the JSON automatically, and spits out clean HTML tables. No more debugging selectors or fighting with response formats.
Throw in error handling, data validation, and auto-retries without writing code. When your API changes later, you just update the mapping instead of rewriting everything.
I’ve saved 20+ hours this month alone automating these transformations instead of coding them manually.
Try Latenode for building workflows - way cleaner than debugging jQuery: https://latenode.com
u’re mixing $.getJSON with a config object - that won’t work. $.getJSON only takes a URL, not a full ajax config. Switch to $.ajax() since u’ve got headers and other settings. That’s why ur data isn’t showing up even tho console works fine.
Had this exact problem recently. The issue was my API response structure wasn’t what I expected. Your console.log might show data, but check if result.statistics is actually an array - sometimes APIs nest stuff another level deep. Log just result first to see everything. If your item properties are undefined/null, you’d get empty cells but still see rows. Since no rows show up at all, the iteration isn’t running - result.statistics is probably undefined or not an array. Throw a console.log on result.statistics right before your each loop to confirm it exists.
Yeah, it’s definitely the AJAX method like others said, but check one more thing. Your HTML table needs proper tags before the JavaScript runs. If you’ve only got or just
without tbody, the append won’t work - it’ll just fail silently. Same thing happened to me last month when I forgot the tbody in my markup. Double-check your table ID matches exactly too - case sensitivity will bite you.
wrap your ajax call in a try-catch block. the request might complete but throw a parsing error ur not catching. also check that your table html loads completely before the script runs - timing issues will break this every time.
Check your network tab in dev tools instead of just console logs. I spent hours on similar code and found the API was returning 200 but with an error in the response body - my JSON structure was totally different than expected. The $.getJSON was working but not with the data I thought I’d get. Also make sure your table element exists when the script runs. If you’re loading JavaScript before the HTML table renders, getElementById returns null and your appends fail silently. Either move your script tag below the table or wrap everything in document ready so it waits for the DOM to load.