firestore query multiple filter to retrieve collection in react-native

Question

Firestore query criteria Console.log of the query result Source code-render data I am new to react native firebase firestore. I am designing an app where the functionality is that the user should be able to search for a registered user on any of the three critieria:

by Name
by Expertise
by Location

If the user explicitly types in these fields, my code will retrieve the filtered result from firestore

Code in react native to retrieve from firestore:

var db = firebase.firestore();
    var routeRef = db.collection("users");
    var queryResult = routeRef
.where(("Name", "==", NameInput)
.where("Expertise", "==", ExpertiseInput)
.where("Location","==" , LocationInput))
.get().then(function(snapshot){/* ... */}

Scenario: If the user did not type in any search criteria in the UI for any one field, say "Location" , in that scenario I dont want to set the filter for that criteria from firestore. That means , the expected code should be:

   var queryResult = routeRef
    .where(("Name", "==", NameInput)
    .where("Expertise", "==", ExpertiseInput)

Question: I am not sure how to dynamically set the .where condition based on the whether user typed in UI or not. Can anyone please help?

Still this does not get the query result

JayCodist · Accepted Answer · 2020-08-10T19:24:18.623

8

The where() function returns a Query object (which allows you to query multiple where() conditions in the first place). So you can sorta "save the step-by-step progress" conditionally. Something like this:

const routeRef = db.collection("users");
const nameFilter = NameInput ? routeRef.where("Name", "==", NameInput) : routeRef;
const expertiseFilter = ExpertiseInput ? nameFilter.where("Expertise", "==", ExpertiseInput) : nameFilter;
const locationFilter = LocationInput ? expertiseFilter.where("Location", "==", LocationInput) : expertiseFilter;
locationFilter.get().then(snapshot => {
   // The snapshot returned by `where().get()` does not have a `data()` reference since it returns multiple documents, it has `docs` property which is an array of all the documents matched
   snapshot.docs.forEach(doc => {
     const docData = { ...doc.data(), id: doc.id };
     console.log(docData);
})

edited Aug 10 '20 at 19:24

answered Aug 10 '20 at 12:48

JayCodist

2,424
2
12
28

Thank you so much. Let me try and update you soon – Bhol Aug 10 '20 at 13:12
Jay Codist Thank you – Bhol Aug 10 '20 at 13:13
Jay Codist, I tried however am not getting result. Am not sure what is the cause of this . Please refer to the attached screen shot of the VSS Code . Appreciate your help – Bhol Aug 10 '20 at 18:11
Oh I see what you're doing wrong. Updating my answer @Bhol. Basically, change your `snapshot.forEach()` to `snapshot.docs.forEach()` – JayCodist Aug 10 '20 at 19:26
Did you see my comment above? – JayCodist Aug 10 '20 at 19:27
Thanks @Jay Codist for the help. I am updating the query now per your feedback. Will update you the result soon. – Bhol Aug 10 '20 at 19:39
Hi @Jay Codist, tried the above solution. However still no luck. The firestore did not fetch any query result. – Bhol Aug 10 '20 at 20:12
Update your question with your new code and the result you're getting – JayCodist Aug 10 '20 at 20:15
Hi@ Jay Codist, I have updated the question with the latest 3 screen shots. – Bhol Aug 10 '20 at 20:42
We'll continue the discussion at this chatroom: https://chat.stackoverflow.com/rooms/219571/discussion-between-bhol-and-jay-codist – JayCodist Aug 10 '20 at 22:05
1

-Thank you so much. This is working fine now. – Bhol Aug 11 '20 at 21:58

firestore query multiple filter to retrieve collection in react-native

1 Answers1