jquery json data not populating table cells

jquery json data not populating table cells

Hello - I'm calling a remote json file to populate a table and the table and data is not rendering on the html page. I'm not getting any js errors.

html:   <table id="content"></table>


$(document).ready(function(){
$.getJSON( "https://xx.xxx.com/xxx.medals/medals.json", function( data ) {
var stats = [ ];
//console.log(stats);
$.each( data, function( key, val ) {
   stats.push('<tr><td class="one">' + key + '</td>' + '<td id="flag"><div class="flag">' + val.id + '</div></td>' + '<td class="cnt">' + val.name + '</td><td>' + val.gold + '</td><td>' + val.silver + '</td><td>' + val.bronze + '</td><td class="toats"></td>'  );
});
$("</tr>", {
 // "class": "content",
html: stats.join( "" )}).appendTo( "#content" );
});
});

I have not been able to get this working. Thank you for your assistance.
T6s