0

What I am trying to do is grab the two data-group-score values from the same group-ids and add them together:

https://jsfiddle.net/x0nyr9qn/51/

Updated version I have got with so far:

https://jsfiddle.net/x0nyr9qn/61/

Sample HTML:

<div class="quiz-block-container">
  <div class="quiz-block-question" data-group-id="1" data-group-score="2">
  </div>
  <div class="quiz-block-question" data-group-id="1" data-group-score="3">
  </div>

  <div class="quiz-block-question" data-group-id="2" data-group-score="1">
  </div>
  <div class="quiz-block-question" data-group-id="2" data-group-score="3">
  </div>

  <div class="quiz-block-question" data-group-id="3" data-group-score="3">
  </div>
  <div class="quiz-block-question" data-group-id="3" data-group-score="1">
  </div>

  <div class="quiz-block-question" data-group-id="4" data-group-score="1">
  </div>
  <div class="quiz-block-question" data-group-id="4" data-group-score="1">
  </div>
</div>

What I am trying to do is loop through the blocks with class "quiz-block-question" grab the data-group-id, then return the data-group-score for each group by its ID so I can add them together for a total score from those values within that group, and do so for each group-id.

The JS examples I've been playing with and their current states but think I drifted away from something closer to working, but here is what I currently have.

JS (1)

$('.quiz-block-question').each(function() {
  var id = $(this).data('group-id');
  var score = $(this).data('group-score');
    var i = 0;

  $("[data-group-id='" + id + "']").each(function(index) {
    if(++i > 2) {
      return false;
    }
    //$(this).find('.group-id').text(id);
    //console.log("group: " + $(this).data('group-id'));
    //$(this).find('.group-score').text(score);
    //console.log("group score: " + $(this).data('group-score'));
    var first = $(this).data('group-score')[1];
    console.log(first);
    var second = $(this).data('group-score')[2];
    var total = first + second;
    $('.results').append("total:" + total);

  });
  //return false
});

JS (2)

$('.quiz-block-question').each(function(i) {
  var groupID = $(this).data("group-id");
  if ($(this).data('group-id') == i + 1) {
    //console.log(this);
    $("[data-group-id='"+i+"']").each(function() {
      console.log(this);
      var questionGroupID = $(this).data('group-id');
      $(this).each(function() {
        console.log("group score: "+$(this).attr('data-group-score'));
      });
    });
  }
});
halfer
  • 19,824
  • 17
  • 99
  • 186
James
  • 1,668
  • 19
  • 50

1 Answers1

1

Sounds like you just want a .map/reduce operation. This returns an object with key/value pairs of id/total.

var q = document.querySelectorAll('.quiz-block-question');

var res = Array.from(q, el => 
  ({id: el.dataset.groupId, score: +el.dataset.groupScore})
).reduce((obj, d) =>
  Object.assign(obj, {[d.id]: (obj[d.id] || 0) + d.score})
, {});

console.log(res);
<div class="quiz-block-container">
  <div class="quiz-block-question" data-group-id="1" data-group-score="2">
  </div>
  <div class="quiz-block-question" data-group-id="1" data-group-score="3">
  </div>

  <div class="quiz-block-question" data-group-id="2" data-group-score="1">
  </div>
  <div class="quiz-block-question" data-group-id="2" data-group-score="3">
  </div>

  <div class="quiz-block-question" data-group-id="3" data-group-score="3">
  </div>
  <div class="quiz-block-question" data-group-id="3" data-group-score="1">
  </div>

  <div class="quiz-block-question" data-group-id="4" data-group-score="1">
  </div>
  <div class="quiz-block-question" data-group-id="4" data-group-score="1">
  </div>
</div>
  • Thanks, is it possible using jQuery so I can keep consistent? also if I need to use the array results what would be the best way to do this? thanks again for your help! absolute star! – James Mar 06 '18 at 00:11
  • @James: If you want jQuery, just change `document.querySelectorAll` to `$`. Keep the rest the same. The best way to use the results? What do you mean? It's just an object. –  Mar 06 '18 at 00:13
  • Ok, is it possible to do teh array / loop in jquery? – James Mar 06 '18 at 00:21