Filtering problem

I have a list of car models with 8 parameters, such as brand, power (in kW) and so on. My list is over 1,000 entries long, so I want to give the user the option to filter down the data to a much smaller list, before he picks a model.

On the UI, I have 4 dropdowns (DD). From top to bottom, DD1 asks for the brand, DD2 asks for Fuel type (Diesel, Hybrid, etc.), and DD3 asks for the Gearbox type (automatic or manual).
The user’s choices are captured in 3 page variables. I would like to fill the 4th dropdown (Model), whose visibility is bound to a formula that makes it only visible when all 3 choices have been made, with the list of cars that match the user’s choice for the first 3 parameters.
How do I check the list (of 1,000+ cars) coming from the API for the user-selected parameters, and show only those in the dropdown that match the user’s selection? I assume it is some sort of MAP function, but so far I couldn’t figure it out myself.
Any help is greatly appreciated!


Some resources to check before you post:

AppGyver Academy: SAP AppGyver Quick-Start

Troubleshooting FAQ: SAP AppGyver FAQ

I would use Custom Javascript for this. Just fire the CJS when all the above 3 inputs are selected.

1 Like

Hi,

A combination of SELECT and MAP functions should work here. First, use SELECT to filter the list:
SELECT(data.carModels, item.brand === pageVars.brand && item.fuelType === pageVars.fuelType && item.gearbox === pageVars.gearbox)
And then, since dropdown requires a list of objects with a label and value properties, use the MAP function to map the results into that format.
MAP( SELECT(...), { label: item.model, value: item.model } )

1 Like

You can also do the filtering in the backend, for each api call. I thin you would need to a button to the bottom of the dropdown lists, so that when the user changes the options he can press it and an api call can be made. If you are using a popular backend, there should be tutorials on how to filter data