calculation works in console but does not render in table cell
Hello,
I have a calculation that works in the console. I want to render the same data into a table cell using jQuery.
The data calculated comes from a json file and runs through a loop and works fine. I want to capture the sum of three table cells for each table row and write the total sum to a fourth cell on the same row. This works fine in the console and gives me the values that I want.
Only the last item in the array prints to all of the target cells. table has 10 rows of data.
The issue is in the code below the //metal count comment
.
sample snippet of .json data: (no problems with the json)
"id": "AUT",
"name": "Austria",
"gold": 4,
"silver": 8,
"bronze": 5
jquery code:
$.getJSON( "https://remotefeed.com/medals.json", function( data ) {
var stats = [];
//console.log(stats);
$.each(data, function (key, val) {
var sum = 0;
var k = key+1; //increment array key/index + 1
$('<tr class="cntRow"><td class="one">' + k + '</td>' + '<td id="flag"><div class="flag">' + val.id + '</div></td>' + '<td class="cntId">' + val.id + '</td><td class="gold gCount">' + val.gold + '</td><td class="silver sCount">' + val.silver + '</td><td class="bronze bCount">' + val.bronze + '</td><td class="toats"></td></tr>').appendTo("#content");
//metal count
function totMedById(){
var tot = [val.id, + val.gold + val.silver + val.bronze];
var value = $(this).text();
if(!isNaN(value) && value.length != 0) {
tot += parseFloat(value);
}
console.log(tot);
$('.toats').text(tot);
}
totMedById();
});
});
Thank you for your help.
t6s