Stack Exchange
data attribute grouped by value calculate sum of other data attribute
I am trying to calculate all the huishoudens that are in each provincie. For this question I created a fiddle which can be found here: http://jsfiddle.net/Lyf1sak3/1/
With this sample data:
<div data-provincie="Noord-Holland" data-huishoudens="102"></div>
<div data-provincie="Noord-Holland" data-huishoudens="1250"></div>
<div data-provincie="Zuid-Holland" data-huishoudens="956"></div>
<div data-provincie="Zuid-Holland" data-huishoudens="235"></div>
<div data-provincie="Groningen" data-huishoudens="495"></div>
<div data-provincie="Groningen" data-huishoudens="55"></div>
<div data-provincie="Groningen" data-huishoudens="247"></div>
<div data-provincie="Utrecht" data-huishoudens="123"></div>
<div data-provincie="Utrecht" data-huishoudens="675"></div>

And this code:
var provincies = {},
    provincie;
    sum = 0;
$('*[data-provincie]').each(function(i, el){
    provincie = $(el).data('provincie');
    
    if (provincies.hasOwnProperty(provincie)) {

        provincies[provincie] += 1;
        sum += $(this).data('huishoudens');

    }
    else {
        provincies[provincie] = 1;
    }
});

// print results
$('#result').append('<hr>');
for(var key in provincies){
    $('#result').append(key + ' (' + provincies[key] + '|' + sum + ')<br>');
}

I am grouping each provincie by its own property and now I just need to calculate the other data attribute, but I am completely stuck here. I am getting either the result 675 which is the last div in the sample data or I get 2462 and I have no clue how it gets that number.
What do I need to modify to get this result:
Noord-Holland (2|1352)
Zuid-Holland (2|1191)
Groningen (3|797)
Utrecht (2|798)

Whatever answer you give it is really appreciated but please don't post answers where it requires to hard code the names of provincie like $('*[data-provincie="Noord-Holland"]');

If you know provincie before only you can create an array with all provincie and then you can use this as a key to compare it with all the div if matches you can add same to sum variable and finally append final result to your result div.
Demo Code :


//all data provinces
//var json_ = ["Noord-Holland", "Zuid-Holland", "Groningen", "Utrecht"]
var json_ = [];
$('*[data-provincie]').each(function(i, el) {
//check if in array or not
  if ($.inArray($(this).data('provincie'), json_) < 0) {
    json_.push($(this).data('provincie'));//push same
  }

});
console.log(json_)
sum = 0;
count = 0;
//loop through keys
for (var key in json_) {
  $('*[data-provincie]').each(function(i, el) {
    var provincie = $(el).data('provincie');
    //if key matches
    if (json_[key] == provincie) {
      sum += $(el).data('huishoudens');
      count++;
    }
  });
  //append result
  $('#result').append(count + ' (' + json_[key] + '|' + sum + ')<br/>')
  count = 0;
  sum = 0 //change sum to 0 again
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-provincie="Noord-Holland" data-huishoudens="102"></div>
<div data-provincie="Noord-Holland" data-huishoudens="1250"></div>
<div data-provincie="Zuid-Holland" data-huishoudens="956"></div>
<div data-provincie="Zuid-Holland" data-huishoudens="235"></div>
<div data-provincie="Groningen" data-huishoudens="495"></div>
<div data-provincie="Groningen" data-huishoudens="55"></div>
<div data-provincie="Groningen" data-huishoudens="247"></div>
<div data-provincie="Utrecht" data-huishoudens="123"></div>
<div data-provincie="Utrecht" data-huishoudens="675"></div>

<div id="result"></div>




I know all the provinces but I also need to do this same trick for all the places later on and I do know all the places but there are over 4000 of them. Is there a way to make it iterate without having to manually fill in the names?
Nonetheless, thank you very much for this answer!
PS: I made a fiddle from your answer so I could fiddle with it: https://jsfiddle.net/nr0s25vm/

is there any place where you are having these provinces shown only single time ? Then you can use each loop and push same to array ..in that way you need to manually add data ..jquery will handle it. Also, there are many question asked before how to populate array without duplicate data you can search for same :)

Is it possible to create the array when using           if provincies.hasOwnProperty(provincie)) { .... }
And to answer your question: Sadly no even the places are having duplicates into them the only thing that is unique are the postalcodes. They are not present in the example I provided but it works via the same principle data-postalcode and data-city.

done updated with using each-loop to add value in array have a look :)

You just saved me so much extra time. I was basically doing something similar you are doing in your updated answer only ten times worse. Thank you so much! This is perfect

You could modify the function like,
Get the count attributes like,
var count = parseInt($(this).data('huishoudens'));
Then inside the condition assign it like,
if (provincies.hasOwnProperty(provincie)) {
  provincies[provincie]["sum"] += count;
}
else {
  provincies[provincie] = {"sum": count};
}

Working Snippet:


var provincies = {},
    provincie;
    sum = 0;
$('*[data-provincie]').each(function(i, el){
    provincie = $(el).data('provincie');
    var count = parseInt($(this).data('huishoudens'));
    if (provincies.hasOwnProperty(provincie)) {
        provincies[provincie]["sum"] += count;
        provincies[provincie]["provinceCount"] += 1;
    }
    else {
       provincies[provincie] = {"sum": count, "provinceCount": 1};
    }
});

// print results
$('#result').append('<hr>');
for(var key in provincies){
    $('#result').append(key + ' (' + provincies[key].provinceCount + '|' +  provincies[key].sum + ')<br>');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<html>

<head>
  <title>Course example</title>
  <link rel="stylesheet" href="css/styles.css" />
</head>

<body>
<div data-provincie="Noord-Holland" data-huishoudens="102"></div>
<div data-provincie="Noord-Holland" data-huishoudens="1250"></div>
<div data-provincie="Zuid-Holland" data-huishoudens="956"></div>
<div data-provincie="Zuid-Holland" data-huishoudens="235"></div>
<div data-provincie="Groningen" data-huishoudens="495"></div>
<div data-provincie="Groningen" data-huishoudens="55"></div>
<div data-provincie="Groningen" data-huishoudens="247"></div>
<div data-provincie="Utrecht" data-huishoudens="123"></div>
<div data-provincie="Utrecht" data-huishoudens="675"></div>

<div id="result"></div>

</body>

</html>




I wished I could accept two answer I already accepted the other as I had not seen your answer while I was typing my reply to the other person. But I upvoted your answer as it is just as good as the other in my eyes and I guess time will tell by other users which one is going to be used more. But I would like to thank you very much for your answer it is really appreciated.

@purple11111, I don't think those much of actions needed there to achieve your expected result.. You can handle it in the way you mentioned in the question itself.. You can give a try to the solution if you are okay.. Its not for accepting the solution and all but I  you can handle it in simpler way that is what I mean to say here..
