1
\$\begingroup\$

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?

\$\endgroup\$
2
\$\begingroup\$

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;
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.