stack 45204270

using reduce like a baller

by Gerald Gillespie

HTML

<h1>
Gender Totals
</h1><form>
</form>
<span>Answer for <a href="https://stackoverflow.com/questions/45204270/how-to-use-array-reduce-with-condition-in-javascript/71329305#71329305">stack question</a></span>

CSS

/* https://stackoverflow.com/questions/17275707/how-do-i-evenly-add-space-between-a-label-and-the-input-field-regardless-of-leng */

label {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  text-align: right;
  width: 400px;
  line-height: 26px;
  margin-bottom: 10px;
}

input {
  height: 20px;
  flex: 0 0 200px;
  margin-left: 10px;
}

JavaScript

console.clear();
//closure
(function({
  records = [],
  targetGenders: genders = [],
  defaultOnEmptySet: result
}, fn) {

  //reduce callback extracted
  const sumGender = (desired) => ((sum, {
    gender,
    value
  }) => ( desired === gender ? sum + value : sum ));

  console.log({
    genders
  })
  genders.reduce((report, gender) => {
    const total = records.reduce(sumGender(gender), result);

    return fn.reporter({
      gender,
      result: total
    });
    //    return fn.reporter(report);
  }, undefined);


})( // separate data from logic 
  {
    records: [{
        value: 24,
        gender: "BOYS"
      },
      {
        value: 42,
        gender: "BOYS"
      },
      {
        value: 85,
        gender: "GIRLS"
      },
      {
        value: 12,
        gender: "GIRLS"
      },
      {
        value: 10,
        gender: "BOYS"
      }
    ],
    targetGenders: ['BOYS', 'GIRLS', 'NA'],
    defaultOnEmptySet: 0
  },
  //support
  {
    reporter(report) {
      console.log(report);
      [report].reduce((destination, {
        gender,
        result
      }) => {
        const el = document.createElement('div');
        const unique = `${Math.random()}${gender}`.replace('.', '');
        el.innerHTML = `<label for="${unique}">${gender}:<input type="text" name="${unique}" value="${result}" size="${(result+'').length}"/>`;
        destination.append(el);
      }, document.querySelector('form'))
    }
  }

)