Filter elements with more than one dataSlot/Category

[petoma]

Hello,

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.

Thank you.

[Antti_Neonto]

Hi,

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:

React Studio’s Firebase plugin now Supports IN Queries!

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:

[petoma]

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:

1. 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.
   

   

2. 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?

Thank you!

[Antti_Neonto]

Hi,

I’d suggest that you check the Firestore docs: https://firebase.google.com/docs/firestore/query-data/queries

I’m quite sure you cannot make In and array-comtains-any clauses more than one column at a time.

What comes to erasing the Data slot value you just need to write a script to clear the Data slot or use Clear interaction in Save data interaction.

[petoma]

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:

** error creating firebase query object from ‘where(“categories”,“array-contains-any”,[“Principiante,“Pop/Rock””])’: SyntaxError: Unexpected identifier

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:

where(“categories”,“array-contains-any”,["$slot(ds_SlotLevel)"])

Thank you!

[Antti_Neonto]

Take away the quotation marks around the data slot in Query field.

Here is what I had on my project:

Query inb Data sheet:

where("categories",
"array-contains-any",
[$slot("ds_SlotSelectedCatagories")]
)

Button script which adds new filter to data slot:

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;

[petoma]

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.

[Antti_Neonto]

It definitely will because you’re not adding ’ to first item. Check my code example:

if (selectedCategories != ""){
input = selectedCategories + ",'" + input +"'";
} else
{
input = "'" + input +"'";
}

If data slot value is empty ’ marks are added around the filter (first filter).

[petoma]

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?

[Antti_Neonto]

What you need is to create this kind of string into data slot: loading firebase data for ‘cars’ with query:

'filter1','filter2','filter3'

So you just need to figure out how to create a script which creates that kind of string into Data slot. The full query looks like this in my console:

loading firebase data for 'cars' with query: where("categories",
"array-contains-any",
['diesel','red','sedan']
)

[petoma]

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!

[petoma]

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?

[Antti_Neonto]

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.