Search code examples
javascripthtmljqueryrowscalculated-columns

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

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.

enter image description here

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>

Solution

  • 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