JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
There are <span id="total"></span> MLAs matching.

<p>click to exclude:</p>
<a href="#" id="male">male</a>
<a href="#" id="female">female</a>
<a href="#" id="white">white</a>

JavaScript

var $total = $('#total');

// MLAs
var MLAs = [{
    "Name": "Nancy Allan",
        "Age": 62,
        "Constuency": "St. Vital",
        "Party": "NDP",
        "Gender": "Female",
        "Ethnicity": "White"
}, {
    "Name": "James Allum",
        "Age": null,
        "Constuency": "Fort Garry-Riverview",
        "Party": "NDP",
        "Gender": "Male",
        "Ethnicity": "White"
}, {
    "Name": "Rob Altemeyer",
        "Age": null,
        "Constuency": "Wolseley",
        "Party": "NDP",
        "Gender": "Male",
        "Ethnicity": "White"
}];

var total = MLAs.length;

var setTotal = function(value) {
    $total.text(value);
};

var subtract = function(number) {
    total = (total - number) > 0 ? (total - number): 0;
    setTotal(total);
};
    
var gender = function(array, gender) {
    //console.log(array, 'gender');
    return _.where(array, {"Gender": gender}).length;
};

var ethnicity = function(array, ethnic) {
    return _.where(array, {"Ethnicity": ethnic}).length;
};

$('#male').click(function() {
    var males = gender(MLAs, 'Male');
    subtract(males); // subtract from total and set
});

$('#female').click(function() {
    var females = gender(MLAs, 'Female');
    subtract(females); // subtract from total and set
});

$('#white').click(function() {
    subtract(ethnicity(MLAs, 'White'));
});

$(function() {
    setTotal(total); // set start value
});