CODEWITHSUNDEEP
javascriptjquery
Oğuz Çelikdemir
Oğuz Çelikdemir

Reputation: 4980

Sum associative array key values and group it by key

I have table as follows :

<table>
   <thead>
      <th>PRODUCT</th>
      <th>QUANTITY</th>
      <th>AREA</th>
      <th>PRICE</th>
      <th>TOTAL</th>
   <tr>
      <td id="name">SWEETS</td>
      <td id="qty">10</td>
      <td id="area">250</td>
      <td id="price">16.50</td>
      <td id="total">160.50</td>
   </tr>
   <tr>
      <td id="name"">DRY FOODS</td>
      <td id="qty">5</td>
      <td id="area">100</td>
      <td id="price">10.25</td>
      <td id="total">51.25</td>
   </tr>
   <tr>
      <td id="name">FRESH</td>
      <td id="qty">20</td>
      <td id="area">250</td>
      <td id="price">5</td>
      <td id="total">100</td>
   </tr>
   <tr>
      <td id="name">MEAT</td>
      <td id="qty">10</td>
      <td id="area">250</td>
      <td id="price">15</td>
      <td id="total">150</td>
   </tr>
   <tr>
      <td id="name">FROZEN</td>
      <td id="qty">20</td>
      <td id="area">300</td>
      <td id="price">10</td>
      <td id="total">200</td>
   </tr>
</table>

So, I want to make an array like {area:total} then grouping array values based on area and sum area values.

Like :
AREA 250 : 410.5
AREA 100 : 51.25
AREA 300 : 200

I tried as follow which I got it array but I don't know how can I grouping the areas ( I used setInterval function because employees can remove or change the area values)

            setInterval(function() {
            var $row = $(this).closest("tr");
            var sasData = [];
            $row.each(function(i) {
                var sasValue = parseFloat($row.find("#area").val());
                var totValue = parseFloat($row.find("#total").val());
                sasData.push({sas:sasValue, tot:totValue});
                console.log(sasData);
            });

            function compressedArray(original) {
                var compressed = [];
            };
        }, 1500)

Could you please show me the way how can we handle this issue?

Upvotes: 0

Views: 2928

Answers (3)

Sagiv Ofek
Sagiv Ofek

Reputation: 25270

id should be unique. so change <td id="area">250</td> to <td class="area">250</td>

then just call:

o = {};
$("td.area").each(function(){ 
 key = o[$(this).text()];
 if (!key) key = 0;
 key += parseFloat( $(this).closest("tr").find(".total").text());
});

then you have on object contains key-value [key=area code, value=total]

Upvotes: 1

h2ooooooo
h2ooooooo

Reputation: 39542

This JSFiddle should solve your problem. I've also fixed your missing thead, your double quote in the DRY FOODS td, and changes id's to classes:

http://jsfiddle.net/Q9nrf/1/

var areas = {};
$("tr").each(function() {
    var area = $(this).find("td.area").text();
    if (area != "") {
        var total = parseFloat($(this).find("td.total").text());
        if (!areas.hasOwnProperty(area)) {
            areas[area] = 0;            
        }
        areas[area] += total;
    }
});
console.log(areas);

Upvotes: 2

RobG
RobG

Reputation: 147413

You will need to change the id values to some other attribute, say class.

Loop over the rows (use the tbody element to skip the header) and collect values from the elements with the classes you're after. You will need to use an array to store them, as you can't order the properties of an object and each property must have a unique name.

Upvotes: 1

Related Questions