How would I filter using filterBy for a multiple values selected and use mapBy to manipulate the array?

Question

on my template I do have a dropdown that may select a multiple values Example, zoneNameOne, zoneNameTwo. My component.js has a code that would filter a records based on the multiple values that had been selected from the dropdown.

jobOrderCityNames: computed('selectedZoneOrCityName', 
 'jobOrders.@each.zoneName', 'jobOrders.@each.cityName', function() {
  let selectedZoneOrCityName = this.get('selectedZoneOrCityName');
  if (selectedZoneOrCityName) {
    return this.get('jobOrders').filterBy('zoneName', selectedZoneOrCityName).mapBy('cityName');
   } else {
    return [];
  }
}),

The jobOrders return a array of objects below. [{id: 123, type: "job-orders",…}, {id: 124, type: "job-orders",…}]

My problem: I can't filter the array of objects on a multiple values selected from the dropdown. Please see the code above

My question: How can I filter the array of objects on a multiple values and mapBy the property name?

Please help me, any response is much appreciated.

Answer 1

Instead of filterBy, you can use filter. Then you can check if either of any item's zoneName or cityName properties are equal to your selectedZoneOrCityName for filtering. So your code will be like:

return this.get('jobOrders').filter((jobOrder) =>{
    return (jobOrder.zoneName === selectedZoneOrCityName) || (jobOrder.cityName === selectedZoneOrCityName);
  }
).mapBy('cityName');