Firebase Real-Time Database Querying Sorting Filtering for Web

In this Firebase tutorial, you will learn how to make a query to the Firebase Real-time Database using Firebase events. After that, you will learn how to sort and filter data using Firebase Order Functions.

Finally, I will be showing you how to filter the data using Firebase Query Functions.

Making a query to the Firebase Real-time Database is completely different than traditional SQL queries because Firebase uses NO-SQL Database Structure.

Trust me it’s not that hard! 🙂

Let’s split this article into FOUR parts.

• First, NodeJS + Firebase Database Setup process.
• Then, talking about Firebase Events with examples.
• After that, diving into Firebase Order Functions for Sorting Data.
• Finally, getting our hands dirty with Firebase Query Functions for Filtering data.

NodeJS + Firebase Database Setup

STEP #1: Create an app on the Firebase Console: I have already covered this in one of my other Firebase blogs links below:

• Setting up a Firebase App on the Firebase Console
• Enable Read and Write Permission to the Firebase Database

STEP #2: Import sample JSON file to the Firebase Database.

{
  "users": {
    "-L6sDfnljY_Kd2IOvWu9": {
      "age": "24",
      "email": "[e-mail]",
      "name": "Alex Meraz1"
    },
    "-L6sDmT0yPtPFIMOj40s": {
      "age": "22",
      "email": "[e-mail]",
      "name": "Mohammand Rafi"
    },
    "-L7q-Sg_SCvs7QOlb7Kh": {
      "age": "31",
      "email": "[e-mail]",
      "name": "Raja Tamil"
    },
    "-L7qUZl_fpcmYzJMZK-V": {
      "age": "21",
      "email": "[e-mail]",
      "name": "Sundar Pichai"
    }
  }
}

Create JSON file with the above code then import it into your Firebase Database,

• Go to DEVELOP → Database → Get Started → DATA Tab.
• Click the ⋮ vertical ellipsis icon at the right, then choose import JSON option from the drop-down.
• Choose the JSON file that you have created with the sample code.

The structure of the database data is just JSON format and in that, I have users node at the top level.

Then, inside, I have a few user objects with the alphanumeric unique key which is automatically generated by Firebase when you insert a new user object, this key is called a push key.

✅ Recommended
Firebase + JavaScript: Full-Stack Firebase

Moving on…

If you want to use Browser JavaScript Client instead of Node Client, you can check it out here. The process is very similar to what I will be doing here in Step 3.

STEP #3: Setting up the Node.js project, I know this will involve some Terminal / Command prompt code.

I know some of you hate that, as I used to also, but this is not that bad, issuing some command then you’re good to go 🙂

• Download & Install Node.js on your computer by going to the Node.js official site.
• Open up Terminal and type node –version, if it shows the version number, you have node installed successfully on your computer.
• Create a folder on your computer called firebase-query.
• In your terminal, change the directory by issuing this command: cd firebase-query.
• Then, run npm init and install firebase by issuing this command: npm install firebase.
• When you open the firebase-query folder in your favorite text editor, you should see the node_modules folder.
• Then, create an index.js file.
• Finally, add the code below inside the file at the top:

var firebase = require("firebase");
firebase.initializeApp({
  databaseURL: "httpss://addyourfirebasedatabaseurl.firebaseio.com/"
});
var dbRef = firebase.database().ref("users");
console.log(dbRef);

In the first line, I import firebase into index.js.

After that, I initialize the firebase app using the initializeApp method on the firebase.

This method takes an object as an argument that has only one property for now, called databaseURL, and replaces the value of the URL with yours.

To get your databaseURL, go to the Firebase Console -> DEVELOP → Database → DATA Tab → https://yourdatabaseURL.com/

dbRef is a reference to the database location path and you can also specify any child node with it, I use users as I am going to unitize the data only inside the users node.

Now, open up your terminal and type node index.js to run the file and of course, if everything works, you will get the console.log(dbRef) message printed with the whole bunch of data.

You will need to run the node index.js every time you make some changes in an index.js file to see the result in the terminal window.

✅ Recommended
Learn Firebase Storage Quickly Guide

Querying Data using Firebase Events

Here are the FOUR important Firebase events:

• value()
• child_added()
• child_changed()
• child_removed()

These events will help you to query data from Firebase Database.

Continue Reading...