Getting array values and adding them if they are numeric

Question

I was wondering how will I be able to get the values from the array generated by the code and then be able to add them in a single variable:

      var selector = 'input[name^="Textbook"]';
        $(selector).on('click', function() {
          var checked = $(selector + ':checked').map(function() {
            return {
              'type': this.type,
              'value': this.value
            };
          }).get().filter(function(o) {
            return '-1' !== o.value; // skip if value = -1(No)
          });
          console.log('checked inputs', checked);
        });
      }

I have checked functions in javascript such as .reduce which according to developer.mozila.org "reduces it to a single value". Though my goal is to add only the numeric values and the array has non-numeric values as well. How can i accomplish this? Thanks!

EDIT: Here's an example of an array that the code above through the variable "checked" could output:

My goal is to add all the 'value' data and ignore the non-numeric ones.

EDIT2: Here's the HTML code. Not too sure how i could show you a working version as it relies on PHP as well and sites such as jsfiddle doesn't support it.

                  <label class="radio-inline">
                    <input form="ES4S" type="radio" name="Supplies1" value="'.$Result[$i]['ID'].'"> Yes
                    <input form="ES4S" type="hidden" style="display:none" value="'.$Result[$i]['ID'].'" name="SuppliesID'.$i.'">
                  </label>
                  <label class="radio-inline">
                    <input form="ES4S" type="radio" name="Supplies1" value="-1">No
                  </label>

Answer 1

Use reduce and check if the value is numeric when you're factoring it into the sum:

var selector = 'input[name^="Textbook"]';

$(selector).parent().on('click', selector, function() {
  var checked = $(`${selector}:checked`).get()
  
  var sum = checked.reduce((c,p)=>{
    if (!(isNaN(+p.value)))
      c += +p.value;
    return c;
  },0)
  
  console.clear();
  console.log('sum',sum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="radio-inline">
  <input form="ES4S" type="radio" name="Textbook" value="MPM Charge"> Yes
  <input form="ES4S" type="hidden" style="display:none" value="MPM Charge" name="Textbook">
</label>
<label class="radio-inline">
  <input form="ES4S" type="radio" name="Textbook" value="100">No
</label>

<br>

<label class="radio-inline">
  <input form="ES4S" type="radio" name="Textbook2" value="MPM Charge"> Yes
  <input form="ES4S" type="hidden" style="display:none" value="MPM Charge" name="Textbook2">
</label>
<label class="radio-inline">
  <input form="ES4S" type="radio" name="Textbook2" value="300">No
</label>

There's no need to do filter first, since that would require iterating over your array twice. Using reduce does everything in one pass. The unary operator (+) is used to convert stringed numerics into a number to ensure isNaN tests positive.

Answer 2

You need to filter by is number then use reduce to get sum of the list

var priceList = [{value:"190"}, {value:"180"}, {value:"Charge"}];

//shorthand code

console.log(priceList.map(n => Number(n.value)).filter(n => !isNaN(n)).reduce(function(a, b) { return a + b; }));

//full code

priceList =priceList.map(n => Number(n.value));
priceList = priceList.filter(n => !isNaN(n));
let priceSum = priceList.reduce(function(acc, val) { return acc + val; });
console.log(priceSum);

Answer 3

const checked = [{"type":"radio","value":"100"},{"type":"checkbox","value":"MPM Charge"},{"type":"radio","value":"100.25"},{"type":"radio","value":"100"},{"type":"radio","value":"MPM Charge"},{"type":"radio","value":"100.5"},{"type":"radio","value":"100"},{"type":"radio","value":"MPM Charge"}]

Array.prototype.sum_values = function (prop, i, running_total = 0) {

  const array = Object.assign([], this)

  if (i === 0) {
    return running_total
  } else {
    const val = array[i - 1][prop] // property you want to add up
    const num = Number(val) // convert string to number
    if (isNaN(num)) { // if converted string in not a number
      return array.sum_values(prop, i - 1, running_total) // add nothing
    } else {
      return array.sum_values(prop, i - 1, running_total + num) // add number
    }

  }

}

const test = checked.sum_values('value', checked.length)
console.log(test) // 500.75

---

// Place the function where your checked array is console logged
var selector = 'input[name^="Textbook"]';
$(selector).on('click', function() {
  var checked = $(selector + ':checked').map(function() {
    return {
      'type': this.type,
      'value': this.value
    };
  }).get().filter(function(o) {
    return '-1' !== o.value; // skip if value = -1(No)
  });
  let sum = checked.sum_values('value', checked.length)
  console.log('checked inputs', sum);
  return sum
})