Filter Array of Objects based on checkboxes

Question

Hello I want to filter my data based on checkboxes checked.

I have 3 checkboxes.

<input type="checkbox" name="shoes" value="shoes" class="storesCheckBox" />
<input type="checkbox" name="clothes" value="clothes" class="storesCheckBox" />
<input type="checkbox" name="sports" value="sports" class="storesCheckBox" />

and my stores data is

// my stores
var stores = [
    {
        id: 1,
        store: 'Store 1',
        storeType: "shoes"
    },
    {
        id: 2,
        store: 'Store 2',
        storeType: "clothes"
    },
    {
        id: 3,
        store: 'Store 3',
        storeType: "sports"
    },
    {
        id: 4,
        store: 'Store 3',
        storeSells: "shoes"
    }
]

So, If I check shoes checkbox, I want to filter the data based on storeType shoes. So I wrote

var getStores = stores.filter(function (store) {
    return store.storeType === 'shoes';
});

But Now, if I check clothes and shoes is already checked. I want to filter shoes + clothes data. And If I uncheck, shoes again I want to filter only clothes data. It can be any number of checkboxes depending on the store type. can you please help me out with this?

store your conditions into an array, then in the filter use includes method. — Max Peng
– Max Peng, Commented Nov 11, 2019 at 5:43

Dino · Accepted Answer · 2019-11-11 07:52:41Z

1

You can try this:

var storeTypesSelected; //array of the types checked
var getStores = stores.filter(function (store) {
    return storeTypesSelected.indexOf(store.storeType) > -1;
});

edited Nov 11, 2019 at 7:52

Dino

8,37213 gold badges50 silver badges93 bronze badges

answered Nov 11, 2019 at 5:47

Anuja

1242 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CertainPerformance · Accepted Answer · 2019-11-11 05:41:04Z

From the checked checkboxes, construct an array (or Set) of the selected values. Then, when iterating over the array, check whether the current storeType is included in the collection:

var stores = [{
    id: 1,
    store: 'Store 1',
    storeType: "shoes"
  },
  {
    id: 2,
    store: 'Store 2',
    storeType: "clothes"
  },
  {
    id: 3,
    store: 'Store 3',
    storeType: "sports"
  },
  {
    id: 4,
    store: 'Store 3',
    storeType: "shoes"
  }
];

document.addEventListener('change', () => {
  const checkedValues = [...document.querySelectorAll('.storesCheckBox')]
    .filter(input => input.checked)
    .map(input => input.value);
  const filteredStores = stores.filter(({ storeType }) => checkedValues.includes(storeType));
  console.log(filteredStores);
});

Shoes: <input type="checkbox" name="shoes" value="shoes" class="storesCheckBox" />
Clothes: <input type="checkbox" name="clothes" value="clothes" class="storesCheckBox" />
Sports: <input type="checkbox" name="sports" value="sports" class="storesCheckBox" />

Mahbub Moon · Accepted Answer · 2019-11-11 05:55:04Z

0

All you need is to hold the checkbox values for filtering in an array.

var elems = document.getElementsByClassName("storesCheckBox");
var list = [];
for(var i=0; elems[i]; ++i){
      if(elems[i].checked){
           list.push(elems[i].value);
      }
}
var getStores = stores.filter(function (store) {
    return list.indexOf(store.storeType) >= 0;
});

The return statement will do the filtering with indexOf function.

answered Nov 11, 2019 at 5:55

Mahbub Moon

5212 silver badges8 bronze badges

Collectives™ on Stack Overflow

Filter Array of Objects based on checkboxes

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related