Multi Filtering a List

How would you go about building the following ideal workflow for narrowing down a list of potential restaurants to eat at?

Home Screen:

  • User selects the cuisines that they would consider eating.
    (tacos, Thai, pizza)
  • User then selects the price range that they’re looking to stay within.
    ($, $$)
  • User then taps a button at the bottom of the page titled “GO” which links to the List Screen

List Screen"
A list of restaurants that’s cuisines and price range matches what the user selected for.

I have tried a few different methods with no luck.

I think I understand, let me know if this works for you:

You’ll need 3 collections:

  1. Restaurants
  2. Cuisines
  3. Price ranges with 2 properties: Name and Number
    (I.e., $ = name & 1 = number | $$$ = name & 3 = number)

Set a relationship for restaurants & cuisines many-to-many: Restaurants can have multiple cuisines, cuisines can have multiple restaurants.

Set a relationship for restaurants & price ranges one-to-many: Restaurants can have 1 price range, price ranges can have multiple cuisines.

I’m assuming that you’re using a list of cuisines and then a list of price ranges.

Home screen needs a list of cuisines, a list of price ranges, and an input field called “Cuisine Input”.
List screen needs 2 input fields: Selected Cuisine input and price input

Set action on home screen when user visits to clear the Cuisine input.

On the list of cuisines, when a cuisine item is clicked, update the input field to contain the cuisine item name. Set the visibility of the list to only visible when cuisine input is equal to empty. Set the list of price ranges visible only when cuisine input is not equal to empty. When the a price range list item has been clicked, set the action to update the input field of the “Selected Cuisine” input to the value contained in the Cuisine input, and “Price” input to the current price item clicked, then link the user to the list screen.

List screen contains restaurants list with 2 filters: Restaurant > Cuisines > Contains > Selected Cuisine Input & Restaurant Price Range is equal to Price input.

Then, simply hide the input fields by covering them with a rectangle.

Thank you!

This got me all the way to the list screen filtering process.

I can successfully filter the restaurants list for Restaurant > Price Range Name > Contains > Price Input.

However, I cannot filter for the cuisine.

I don’t have the option to select Restaurant > Cuisine Name

I can only select All and Count.

That’s correct.

Cuisines > All
Selected Cuisine Input

I’m not able to see the Selected Cuisine Input as an option.

You’re right. I had to make a demo to see. Let’s start over. We’re very close here.

Delete all the input components.

You’ll need 3 screens.
Home, List of prices, list of restaurants

Home screen contains a list of cuisines. On click, goes to list of prices. This sends the current cuisine to the next screen. On the list of prices, click action sends the current price to the next screen.

Then you have your list of restaurants.
List of retaurants: Filter: Current Cuisine > Restaurants
Extra filter: Current restaurant > price range > name = is equal to current price range > name

The demo here is cloneable:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.