Filtering an array according to 7 checkboxes in a form

Posted on

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;
}

Leave a Reply

Your email address will not be published. Required fields are marked *