Sum associative array key values and group it by key

Question

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?

@StefanFandler—the closing tag for thead is optional. But the markup is invalid because thead can only have tr as child elements. — RobG
– RobG, Commented Jun 5, 2012 at 8:48

h2ooooooo · Accepted Answer · 2012-06-05 08:58:28Z

2

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);

answered Jun 5, 2012 at 8:58

h2ooooooo

39.6k8 gold badges70 silver badges108 bronze badges

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

2 Comments

Oğuz Çelikdemir Over a year ago

I have one more question, if we have more than one table in the page, how can we pass this table in $("tr") function?

h2ooooooo Over a year ago

What you could simply do is give the table a class (or an ID) and use the selector $("#mytable tr"). Here's a JSFiddle to demonstrate: jsfiddle.net/Q9nrf/5

RobG · Accepted Answer · 2012-06-05 08:53:44Z

1

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.

answered Jun 5, 2012 at 8:53

RobG

148k32 gold badges180 silver badges216 bronze badges

Comments

Sagiv Ofek · Accepted Answer · 2012-06-05 09:20:48Z

1

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]

edited Jun 5, 2012 at 9:20

answered Jun 5, 2012 at 8:54

Sagiv Ofek

25.3k8 gold badges62 silver badges55 bronze badges

3 Comments

Ateş Göral Over a year ago

Correction: Ids should ideally be unique, but they don't have to be. This is apparent from the forgiveness of modern day browsers. Scoped queries like $el.find("#someid") do work, even if the ids are not unique.

Ateş Göral Over a year ago

Good solution, but please store the outcome of $(this).text() in a local variable.

h2ooooooo Over a year ago

Remember to use parseFloat instead of parseInt, as the OP has floating numbers.

Collectives™ on Stack Overflow

Sum associative array key values and group it by key

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related