Display sum of specific column in Javascript

Question

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>

I got below output:SA 359.8 SA 2731.2 SA 8543.68 SA 9926.97 SA 7897 SA 91.91 SA 2170.28 — bhagyashree jamdar
– bhagyashree jamdar, Commented Mar 1, 2020 at 3:30

Julio Peña · Accepted Answer · 2020-03-01 13:38:30Z

1

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>

edited Mar 1, 2020 at 13:38

answered Mar 1, 2020 at 4:21

Julio Peña

5013 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

bhagyashree jamdar Over a year ago

Thankyou Mate !! Now If I want to display only the Total amount (not all the rows) and Region "SA" , how would I do that?\

bhagyashree jamdar Over a year ago

Also how to display total for each region in same table?Which loop condition should I use?

Julio Peña Over a year ago

1. To show only the sum, then you must stop saving in the "html" variable inside the loop

Julio Peña Over a year ago

2. There are many ways to do it, possibly an object type variable can help you a lot (w3schools.com/js/js_objects.asp) and also reading about map could give you more ideas (https: // developer. mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)

bhagyashree jamdar Over a year ago

I wish to display total for each region. Regions are SA,NSW, QLD.I tried using js_objects but could display only first region and total of all 3

|

Collectives™ on Stack Overflow

Display sum of specific column in Javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related