CODEWITHSUNDEEP
javascript
bhagyashree jamdar
bhagyashree jamdar

Reputation: 49

Display sum of specific column in Javascript

I wish to display sum of amount for particular region. Below is my code to display the data, however I am sure how to add up the amount. I am able to read csv file an display in html table. I am new to Javascript. Any help to proceed would be much appreciated

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
 function loadFile(o)
   {
     var fr = new FileReader();
     fr.onload = function(e)
      {
        showDataFile(e, o);
      };
    fr.readAsText(o.files[0]);
   }

 function showDataFile(e, o)
  { 
    var getCSVData = e.target.result;
    var rows = getCSVData.split("\n");
    var html = '<table border="1">';
    rows.forEach((data, index) => 
    {
       html += "<tr>";
       var value = data.split(",");
       var region = value[1];
       var amount =value[3];
        if(region=="SA")
          {
             html += "<td>" + region + "</td>";
             html += "<td>" + amount + "</td>"
          }
       html += "</tr>";
    });
         html += '</table>';  
         document.getElementById("data").innerHTML = html;
         document.getElementById("data").style.color="blue";
   }
   </script>
   <title> Read CSV file using JavaScript  </title>
   </head>
   <body>
    Select file to read <input type="file" onchange="loadFile(this)">
    <pre id="data"></pre>
   </body>
  </html>

Upvotes: 2

Views: 512

Answers (1)

Julio Pe&#241;a
Julio Pe&#241;a

Reputation: 501

You need to create a variable that you use as an accumulator to save the result of the sum, for example:

var sum = 0;
for (i = 1; i <= 10; i++) {
  sum += 10;
} 
console.log(sum)

Following your idea, you need to create a variable initialized at 0 before forEach and then inside the loop, accumulate its result

NOTE: 1. When you read your .csv file, it is received as a String, so the value of the variable amount is also a String, so before making the sum it should be transformed to a Number type to avoid concatenate

(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
 function loadFile(o)
   {
     var fr = new FileReader();
     fr.onload = function(e)
      {
        showDataFile(e, o);
      };
    fr.readAsText(o.files[0]);
   }

 function showDataFile(e, o)
  { 
    var getCSVData = e.target.result;
    var rows = getCSVData.split("\n");
    var html = '<table border="1">';
    var sum = 0;
    rows.forEach((data, index) => 
    {
       html += "<tr>";
       var value = data.split(",");
       var region = value[1];
       var amount = value[3];
        if(region=="SA")
          {
             if (Number(amount)) {
               sum += Number(amount)
             }
             html += "<td>" + region + "</td>";
             html += "<td>" + amount + "</td>"
          }
       html += "</tr>";
    });
         html += '</table>'; 
         html += '<span>' + sum + '</span>';
         document.getElementById("data").innerHTML = html;
         document.getElementById("data").style.color="blue";
   }
   </script>
   <title> Read CSV file using JavaScript  </title>
   </head>
   <body>
    Select file to read <input type="file" onchange="loadFile(this)">
    <pre id="data"></pre>
   </body>
  </html>

Upvotes: 1

Related Questions