Adding a filter feature
After adding the form functionality, the next feature I implemented was a filter sidebar. This would allow for filtering by type of place once the search results appear.
If a checkbox is checked and the array items’ “description” match when the Filter button is clicked, the items with the corresponding type of place will be displayed.
- (HTML) Create the filter section using an Aside in HTML, then add checkbox inputs and their accompanying labels and a button.
- (JS) Use an array filter on the server array containing all the items based on if a box is checked and a description.
if (checkedSupermarket && place.description === "Supermarket"
|| checkedPark && place.description === "Park"
|| checkedTourist && place.description === "Tourist attraction"
|| checkedRetail && place.description === "Retail"
|| checkedRestaurant && place.description === "Restaurant"
I paired the booleans for each checkbox with its corresponding description and made it so that both must be true for that part of the filter to work. I also made each checkbox independent so that results could be stacked using the || operator.
Then, voila, we have a filter panel capable of allowing the user to check multiple criteria and reveal the corresponding results!