Can't calculate the sum of table rows I've tried many ways from the internet but nothing

Question

I want to build tables that fetch data from api and I succeeded in that so I need now to calculate numbers of table rows and show total in next row or in span div it does not matter. I just need total as shown in image..

I already tried many solutions to calculate rows but always get result zero or NaN. I'm not sure what I'm doing wrong or maybe I just made mistake somewhere in this code... I would appreciate your opinion or solution if possible.

 function statsYesterday() { $.getJSON('https://api.url, function(data) { var data, i, offer, creative, id, conversion, clicks, payout = ""; for (i in data.response.data.data) { offer += "<table><tr><td>" + data.response.data.data[i].Offer.name + "</td></tr></table>"; creative += "<table><tr><td>" + data.response.data.data[i].OfferUrl.name + "</td></tr></table>"; id += "<table><tr><td>" + data.response.data.data[i].Stat.affiliate_info1 + "</td></tr></table>"; conversion += "<table><tr><td>" + data.response.data.data[i].Stat.conversions + "</td></tr></table>"; clicks += "<table><tr><td>" + data.response.data.data[i].Stat.clicks + "</td></tr></table>"; //this code reduce payout by 20% var num = parseFloat(data.response.data.data[i].Stat.payout); var val = num - (num *.20); payout += "<table><tr><td> &euro; " + val + "</td></tr></table>"; }); //end reduce code //this is how code look like without reducing percentage //payout += "<table><tr><td>" + data.response.data.data[i].Stat.payout + "</td></tr></table>"; document.getElementById("offer_name").innerHTML = offer; document.getElementById("creative_name").innerHTML = creative; document.getElementById("id_name").innerHTML = id; document.getElementById("converion_name").innerHTML = conversion; document.getElementById("clicks_name").innerHTML = clicks; document.getElementById("payout_name").innerHTML = payout; }; }); };

 <body> <div class="container"> <br><br><button onclick="statsYesterday()" style="background-color: #4CAF50;border: none;color: white;padding: 16px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;transition-duration: 0.4s;cursor: pointer;">Yesterday</button> &nbsp; &nbsp; &nbsp; <button onclick="statsToday()" style="background-color: #4CAF50;border: none;color: white;padding: 16px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;transition-duration: 0.4s;cursor: pointer;">Today</button> &nbsp; &nbsp; &nbsp; <button onclick="statsLastWeek()" style="background-color: #4CAF50;border: none;color: white;padding: 16px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;transition-duration: 0.4s;cursor: pointer;">Last Week</button> <br><br> <table class="table" id="table"> <thead> <tr> <th>Offer</th> <th>Creative</th> <th>SubID</th> <th>Conversion</th> <th>Clicks</th> <th>Payout</th> </tr> </thead> <tbody> <tr> <td id="offer_name"></td> <td id="creative_name"></td> <td id="id_name"></td> <td id="converion_name"></td> <td id="clicks_name"></td> <td id="payout_name" style="padding-top:30px;"></td> </tr> </tbody> </table> <br><br> </div> </body>

Answer 1

push the values into an array and then you can perform an addition on them later something like this

values=[]
//... your code 
 var num = parseFloat(data.response.data.data[i].Stat.payout);
        var val = num - (num * .20);
         values.push(val)

and then later you can simply iterate over the array and add the values

 let total=values.reduce((acc,curr)=>acc+curr)
  document.getElementById("total").textContent=total

Can't calculate the sum of table rows I've tried many ways from the internet but nothing

Question

1 answers

solution1
0 ACCPTED 2020-06-27 12:51:04

Can't calculate the sum of table rows I've tried many ways from the internet but nothing

Question

1 answers

solution1 0 ACCPTED 2020-06-27 12:51:04

solution1
0 ACCPTED 2020-06-27 12:51:04