Problem
I am filtering an array whenever checkboxes are checked.
if (this.deliveryConcession[0].checked) {
this.allItems = this.allItems.filter(fil => fil.deliveryconcession.readytoship === this.deliveryConcession[0].checked);
}
if (this.deliveryConcession[1].checked) {
this.allItems = this.allItems.filter(fil => fil.deliveryconcession.instantdownload === this.deliveryConcession[1].checked);
}
if (this.deliveryConcession[2].checked) {
this.allItems = this.allItems.filter(fil => fil.deliveryconcession.unespecifiedshipment === this.deliveryConcession[2].checked);
}
if (this.seatConcession[0].checked) {
this.allItems = this.allItems.filter(fil => fil.seatingConcession.parking === this.seatConcession[0].checked);
}
if (this.seatConcession[1].checked) {
this.allItems = this.allItems.filter(fil => fil.seatingConcession.restrictedview === this.seatConcession[1].checked);
}
if (this.seatConcession[2].checked) {
this.allItems = this.allItems.filter(fil => fil.seatingConcession.wheelchair === this.seatConcession[2].checked);
}
if (this.seatConcession[3].checked) {
this.allItems = this.allItems.filter(fil => fil.seatingConcession.alcoholFree === this.seatConcession[3].checked);
}
There are 7 checkboxes, each associated with an object.
seatConcession = [
{ id: 1, name: 'Parking pass included', checked: false },
{ id: 2, name: 'Unrestricted view', checked: false },
{ id: 3, name: 'Wheel chair accessible', checked: false },
{ id: 4, name: 'Without age restrictions', checked: false }
];
deliveryConcession = [
{ id: 1, name: 'Ready to ship(paper)', checked: false },
{ id: 2, name: 'Instant download(e-ticket)', checked: false },
{ id: 3, name: 'Unspecified shipment(paper)', checked: false }
];
How can i improve the above with simple loadash filter or another way?
Solution
The first thing I notice is that this:
if (this.deliveryConcession[0].checked) {
this.allItems = this.allItems.filter(fil => fil.deliveryconcession.readytoship === this.deliveryConcession[0].checked);
}
Is the same as
if (this.deliveryConcession[0].checked) {
this.allItems = this.allItems.filter(fil => fil.deliveryconcession.readytoship);
}
As a second step I would refactor this to something like:
deliveryConcession = [
{ id: 1, name: 'Ready to ship(paper)', checked: false, key: 'readytoship' },
...
];
function filterItems(items, concessions, name) {
for (let k in concessions) {
let concession = concessions[k];
if (concession.checked)
items = items.filter(fil => fil[name][concession.key] )
}
return items;
}
this.allItems = filterItems(this.all Items, this.deliveryConcessions, 'deliveryConcession');
An alternative might be to define your hash as:
deliveryConcession = [
{ id: 1, name: 'Ready to ship(paper)', checked: false, filter: fil => fil.deliveryConcession.readyToShip },
...
];
function filterItems(items, concessions, name) {
for (let k in concessions) {
let concession = concessions[k];
if (concession.checked)
items = items.filter(concession.filter)
}
return items;
}