I already created a page where a list grid shows my Firebase database. There are several elements with different categories. Now I would like to add several filters so I can reduce what is shown to the user according to these filters.
I followed the steps about the script to filter elements, but instead of a search bar I made it with a picker. It works fine. My problem comes when I want to associate another picker in order to filter a different category. I tried to change the script adding the new dataSlot in the stringfiltered and the category in the appropriate place, but it turns out that it only works the second picker (filter) and not the first one.
I guess I am doing something wrong with the script. How should I implement the script?
In the other hand, I understand that I could create these filters in the server side pointing the information to filter in the datasheet section but I donât know how to do it.
This is more about Firebase than React Studio. Anyway Firebase started to support âIn queriesâ which allows you to âfilterâ collection based on multiple filters and React Studioâs plugin supports this as well. Hereâs a good read about it:
I would not suggest to use list script because it has nothing to do how the data is loaded in server and simply would not work on larger data sets.
You just need to edit the Data slot value so that it contains all selected filters in comma separated list. Something like this:
Thank you so much for your answer. I have tried in several ways and I am not able to make it work. Let me show what I have so far:
I have placed two pickers in the filter bar. Each one of them takes its reference from a different column from a sheet and show two different categories each element may belong to. Both pickers save the data in the dataslot âds_SlotFilterâ and I have written the script to separate with comma only in the second picker, because when I did it in both I got an error.
Then I have my sheet that shows all the items that I want to be shown, only to be filtered after picking one value in any of the pickers. So I use the âarray-contains-anyâ option but it doesnât work.
What I get instead is that no element is shown. Not even when I select any value in any picker.
Another thing to ask. I can select a value from the picker, but how would I remove the information from the dataSlot if I want to show all the items again?
Now that I achieved to get working the first filter, I added the second one and followed the steps adding the script. And there is something I must change to make it work because the second filter is not working and the console shows the following error:
Apparently, the quotation marks that were destined to the first identifier are closing at the end of the array instead of the end of the first value. I have tried to change the script of the second filter but my knowledge is limited and I donât get to make it work. This is the script that I wrote in the second filter:
let prevFilters=this.props.appActions.dataSlots[âds_SlotLevelâ];
return prevFilters +",""+input+""";
I leave also here the query that I have in the data sheet, because I believe it has some impact in the output:
var selectedCategories="";
selectedCategories=this.props.appActions.dataSlots['ds_SlotSelectedCatagories'];
//
// Update data slot value
if (selectedCategories != ""){
input = selectedCategories + ",'" + input +"'";
} else
{
input = "'" + input +"'";
}
return input;
And finally button which removes selected filter from data slot
//We are deleting the category from the selected categories
//Simply delete the category form the string
var selectedCategories="";
selectedCategories=this.props.appActions.dataSlots['ds_SlotSelectedCatagories'];
input=selectedCategories.replace("'"+input+"'","");
//Check if string ends with "," and delete "," in that case
if (input.endsWith(",")) {
input=input.substring(0, input.length - 1);
}
//Check if string starts with "," and delete "," in that case
if (input.startsWith(",")) {
input=input.substring(1, input.length);
}
return input;
If I remove the quotation marks in the query the first filter stops working. This is the console log:
** error creating firebase query object from âwhere(âcategoriesâ,
âarray-contains-anyâ,
[Principiante]
)â: ReferenceError: Principiante is not defined
And of course, the second value doesnât work either:
** error creating firebase query object from âwhere(âcategoriesâ,
âarray-contains-anyâ,
[undefined,âPop/Rockâ]
)â: FirebaseError: Function Query.where() called with invalid data.
For the first filter, if I remove the quotation marks from the query, the value that I enter is not recognized because it needs those quotation marks. I tried to manually write the quotation marks in the default value of the slot and it worked. So I am guessing I need to remove the quotation marks from the query field because when I have several values, those quotation marks would be for all of the values. But now I need to do something about the first value so that when the user pick a value, it goes in with quotation marks. The way to do it is through a script?
I finally got it working. It is not exactly what I had in mind but it ok. As my Javascript knowledge is limited, I donât know how to get what I want but I will eventually as I keep learning. It is fine as it is now. I placed a button that clears the data Slot value and that allows me to filter again and not keeping adding values with the pickers.
Thank you so much for your help and great work with the software!
I achieved to make it work with âarray-contains-anyâ but then I decided that I want to show just the documents with ALL words in the array, and not all elements with ANY word in the array. So I thought it would be easy, I just used âarray-containsâ and I donât know why it didnât work. No elements are shown. I also tried the âinâ query but the same issue. No documents are shown. I went to the developer console and no error appears, the array is properly done. Maybe I am missing something?
Just check that the query looks ok in console and check if the query is really ok and you have some documents which will meet the âALLâ written exactly same in the DB. Otherwise its impossible to guess the issue here. Just start debugging the issue by checking that the query seems right in Console.
Here I am again dealing with this. I am sorry if I am being persistent but I believe I am getting close to the solution. I went ahead to try several things and check with the developer console and this is the situation:
The closer I have gotten to the desire result is when I use the query: where("categories","array-contains-any",[$slot("ds_Filter")])
With that, both pickers I have placed (one for level and one for music style) are working. The problem is that it shows all elements/documents that contains any of the values, and what I want is to show just documents with both values in the array. So I guessed I have to change âarray-contains-anyâ for âarray-containsâ.
When I change for âarray-containsâ, it doesnât work leaving the query as before. I need to remove the brackets around $slot(âds_Filterâ). Because if I leave it like this: where("categories","array-contains",[$slot("ds_Filter")])
When I pick the first value, the console shows me:
loading firebase data for âarreglosâ with query: where(âcategoriesâ,
âarray-containsâ,
[âPrincipianteâ]
)
And no document appears. Obviously, it doesnât show anything either when I pick a second value in the other picker:
loading firebase data for âarreglosâ with query: where(âcategoriesâ,
âarray-containsâ,
[âPrincipianteâ,âPop/Rockâ]
)
So I assumed the problem was the brackets. I removed them and now the first picker works, but not the second one. So now my query is like this:
When I select a value in the first filter, it shows all elements with that value in the âcategoriesâ array. It works. But when I select another value from the second picker, the console gives me an error:
** error creating firebase query object from âwhere(âcategoriesâ,
âarray-containsâ,
âPrincipianteâ,âPop/Rockâ
)â: FirebaseError: Function Query.where() requires 3 arguments, but was called with 4 arguments.
So, how can I make it to make it work the way I want? if I select a value in the first picker, it shows all elements with that in the array. If I select another value in the second picker, it must show all documents with both values in the array.
If you take a look Firebaseâs documentation the âarray-contains-anyâ or âinâ wonât support this kind of âandâ query. They are always âorâ so the query will check if any of the criteria is found.
If you want to make multiple .where query then you maybe can do compound query but based on the documentation compound queries cannot include array-contains-any or in.
Thank you so much for your answer. I will keep digging into it and see if I can achieve it. In order to fine tune my query, I still donât get what I had in mind with just one picker and I donât know if it isnât possible.
What I would like to get is that all documents in the collection are shown in the first place without the user doing anything. Then I have placed a picker in the top bar and the idea is that the user can filter those documents by several criteria. Each picker would refer to a different filter category. I am thinking about getting to work that way at least the first picker, and move on from there later. But right now I donât know how to achieve that.
How would go if I want to filter/query the collection only after user has selected some value in the picker?
I donât have any other idea than write a script which checks the filter data slot and if the value is empty then change the list elementâs data source to Data sheet which contains all items. If the filter data slot contains a value then use Data sheet with your filter query.
Thank you so much. That is working perfectly. So I already have the entire collection and it is filtered only when the user picks a value. I would love to have another picker with the possibility to filter an additional category but as I am dealing so hard with it, I am going to leave right there and retake the challenge some time ahead. I am learning at the same time I am creating the project and probably I need to assimilate more concepts before approaching this.
In my example I have two Data sheets: one without Query and one with the query. When user selects value from picker and saves the filter into Data slot then the list script takes care of which Data sheet is used as a data source for the list/grid.
As I previously mentioned the filtering with many categories is just something that Firebase is not supporting at the moment. If that is must have function then you need to choose some other backend.
Itâs been a little less than year since I tried this! Now that I have achieve a lot of things, I am going to try again this goal which is to be able to filter with two categories. I believe it can be done but I am needing some guidance about how to get it done.
Basically I have a collection with many documents, and each document belongs to several categories, for example: difficulty (easy, medium, hard) and style (Pop, Rock, Blues). What I want is not to filter anything and show all elements if the value is a default one; If one filter is applied, it would show all documents with just that one filter; If the second filter is selected, it would only show all documents with both categories; if any of the picker is changed, it would removed the previous value and get the new one of course.
As I believe there are two approaches:
There would be 2 different slots with two different values/categories to filter the results. Two pickers associated with these two slots are easy to achieve. My problem is that I donât know how to achieve to filter just with one of them if the other hasnât been changed from the selector. This is the approach that I would prefer as I would save in different fields these categories tagging each one of them in the database, instead of an array.
The second approach would be with just one slot storing an array with the values and making scripts to achieve the goal. I already have one filter working just fine so the documents are shown based on one dataSheet if the value is the default one, and a different one if the value changes to any other from the picker. But I donât know how to do it incorporating a second picker with the new category.
I would appreciate some help to achieve this. Thank you!
