AngularJS filter based on checkbox selection

Question

I have created a function that is supposed to filter displayed data based on checkbox selection. However, I am having trouble displaying the correct data. The checkboxes are working and everything but I am having trouble pushing the selected checkbox value into the data and getting the output.

I need to select the checkbox to show data that contains that H value.

So basically there are 4 checkboxes associated with the type field you see in the screenshot above. Let's say I select H. I need only data where the type = H to show. I will attach some code below of what I have so far. I just can't seem to get it to work.

var filterOtb = function (keepOpen, types) {
var filtered = data;
var checkedTypes = [];

console.log('filtered = ', filtered);

scope.types.forEach(function(code) {
 if (code.selected) {
  checkedTypes.push(code.type);
  console.log('selected checkbox', checkedTypes);
 }
});

if (scope.validDates.from) {
 filtered = filterOtbByDateRange();
}

if (modal && !keepOpen) {
 modal.hide();
}
return filtered;

}

There is a separate function running in there that filters the keys shown in the screenshots by the date. Please ignore that function... Any help is appreciated as I have been stuck on this for days...

Answer 1

It pretty simple with underscore, you can pass filter value for one or many properties.

let listOfPlays = 
    [
    {title: "The Rambo", author: "Shakespeare", year: 1520},
    {title: "Cymbeline", author: "Shakespeare", year: 1611},
    {title: "The Tempest", author: "Shakespeare", year: 1611},
    {title: "The Dog", author: "Shakespeare", year: 1900}
    ]


_.where(listOfPlays, {author: "Shakespeare", year: 1611});
=> [{title: "Cymbeline", author: "Shakespeare", year: 1611},
    {title: "The Tempest", author: "Shakespeare", year: 1611}]

Answer 2

Check this code for filter array;

  var data = [{ id: '1', type: 'H' }, { id: '2', type: 'H' }, { id: '3', type: 'M' }, { id: '4', type: 'G' }, { id: '5', type: 'J' }, { id: '6', type: 'G' }]; var types = ['H', 'G']; var filter = function (data, types) { return data.filter(item => types.includes(item.type)); } console.log(filter(data, types)); 

  var data = [ { id: '1', type: 'H' }, { id: '2', type: 'H' }, { id: '3', type: 'M' }, { id: '4', type: 'G' }, { id: '5', type: 'J' }, { id: '6', type: 'G' } ]; var types = [ { type: 'H', selected: true }, { type: 'M', selected: true }, { type: 'G', selected: false }, { type: 'J', selected: false }]; var filterOtb = function (types) { var filtered = data; var checkedTypes = []; console.log('filtered = ', filtered); types.forEach(function (code) { if (code.selected) { checkedTypes.push(code.type); console.log('selected checkbox', checkedTypes); } }); return data.filter(item => checkedTypes.includes(item.type)); } console.log(filterOtb(types));