How to retrieve childs of a collection from Firebase with VueJS

Question

I am having trouble getting the right result back from firebase.

My code is

const rootRef = firebase.database().ref()
console.log(rootRef)
const allEmployees = rootRef.child('employees').orderByChild('name').startAt('J')
console.log("These are all employees which names start with a J" + allEmployees)

This is the result in the console

Reference {repo: Repo, path: Path, queryParams_: QueryParams, 
 orderByCalled_: false}
 database: (...)
 key: (...)
 orderByCalled_: false 
 parent: (...)
 path: Path {pieces_: Array(0), pieceNum_: 0}
 queryParams_: QueryParams {limitSet_: false, startSet_: false, 
 startNameSet_: false, endSet_: false, endNameSet_: false, …}
 ref: (...)
 repo: Repo {repoInfo_: RepoInfo, app: FirebaseAppImpl, dataUpdateCount: 
 0, statsListener_: null, eventQueue_: EventQueue, …}
 root: (...)
 __proto__: Query

These are all employees which names start with a J https://xxxxxxxx .firebaseio.com/employees

What I try to achieve is to get a list of employees printed that meet the condition, that is where their name starts with a J.

I have also tried to match a category an employee falls into

rootRef.child('employees').orderByChild('categoryID').equalTo('608Av3zkDS0cg2Iu66b2')
console.log(allEmployees)

But this gave the same result, the url of the database.

Can someone please help me. I have been breaking my head on this for hours.

score 1 · Accepted Answer · answered Feb 26 '19 at 04:55

all your current code does is creating a query to the Firebase Realtime Database. It does not execute that query yet, so there are no results to show. What you end up printing is just the definition of the query object.

To get the results from the database, attach a listener to the query with on() or once() as shown in the documentation on listeners.

A more likely approach:

const rootRef = firebase.database().ref()
const query = rootRef.child('employees').orderByChild('name').startAt('J')
query.once('value', function(snapshot) {
  snapshot.forEach(function(employeeSnapshot) {
    console.log(employeeSnapshot.key, employeeSnapshot.val());
  });
})

I highly recommend searching for a simple, short tutorial on Firebase before continuing. An hour on so spent on building something like a chat app from that, would probably have shown you the error of your approach within seconds.

Note that you seem to misunderstand how ordering and filtering works too. The query you have tells the database to order all employee child nodes by their first name, then find the first child node that starts with a J, and return all child nodes after that. This also includes child nodes that start with K, L, M, etc. If you don't want this, you'll want to tell Firebase to stop returning nodes at some point:

const query = rootRef.child('employees').orderByChild('name').startAt('J').endAt('J\uF8FF')

Here the uF8FF is the last printable unicode character, which ensures you get all results (but only those) starting with a J.

Thank you for answering Frank. I will do that. – timmy Feb 26 '19 at 06:08 — timmy, Feb 26 '19 at 06:08

score 0 · Answer 2 · answered Feb 25 '19 at 23:36

Looking at the docs, it seems that that's not the intended use of orderByChild and startAt

The startAt seems to be for pagination, so it expects the string value to match the first node found.

Look at question Firestore query documents startsWith a string for options to implement starts with functionality. I'm not going to copy/paste their the answers.

Another (untested) possibility is ...

If you do this query often, you could create a property (called startsWith) on each node. This would hold the capitalized first letter of your name property and then you could do that function. The orderByChild('startsWith') would likely not sort the names within the startsWith, unless you apply another sort on it after.

How to retrieve childs of a collection from Firebase with VueJS

2 Answers2