Ordering data in Firebase - Mini Project: Build & Apply

Ordering Data in Firebase Realtime Database

📖 Scenario: You are building a simple leaderboard for a game using Firebase Realtime Database. Players have scores stored in the database, and you want to display the players ordered by their scores from highest to lowest.

🎯 Goal: Learn how to order data in Firebase Realtime Database by a child key to retrieve players sorted by their scores.

📋 What You'll Learn

Create a Firebase Realtime Database reference with sample player data

Add a configuration variable to specify the child key to order by

Query the database ordering players by their scores

Complete the query with a limit to get the top 3 players

💡 Why This Matters

🌍 Real World

Ordering data is essential in leaderboards, product listings, and any app that needs sorted data from a database.

💼 Career

Knowing how to order and limit data queries in Firebase is a key skill for frontend and backend developers working with real-time apps.

1

Create Firebase data with players and scores

Create a Firebase Realtime Database reference called playersRef that contains these exact player entries with their scores: 'player1': 150, 'player2': 300, 'player3': 250, 'player4': 100.

Firebase

# Your code here

Hint

Use ref to create a reference to 'players' in the database and set to add the player data with scores.

2

Add ordering configuration variable

Create a constant called orderByKey and set it to the string 'score' to specify the child key to order players by.

Firebase

import { getDatabase, ref, set } from "firebase/database";

const db = getDatabase();
const playersRef = ref(db, 'players');

set(playersRef, {
  player1: { score: 150 },
  player2: { score: 300 },
  player3: { score: 250 },
  player4: { score: 100 }
});

// Your code here

Hint

Define a constant with the exact name orderByKey and assign it the string 'score'.

3

Query players ordered by score

Create a query called orderedPlayersQuery using query(playersRef, orderByChild(orderByKey)) to order players by their scores.

Firebase

import { getDatabase, ref, set, query, orderByChild } from "firebase/database";

const db = getDatabase();
const playersRef = ref(db, 'players');

set(playersRef, {
  player1: { score: 150 },
  player2: { score: 300 },
  player3: { score: 250 },
  player4: { score: 100 }
});

const orderByKey = 'score';

// Your code here

Hint

Import query and orderByChild from Firebase and create the query using the orderByKey variable.

4

Limit query to top 3 players

Update orderedPlayersQuery to include limitToLast(3) so it retrieves only the top 3 players with the highest scores.

Firebase

import { getDatabase, ref, set, query, orderByChild, limitToLast } from "firebase/database";

const db = getDatabase();
const playersRef = ref(db, 'players');

set(playersRef, {
  player1: { score: 150 },
  player2: { score: 300 },
  player3: { score: 250 },
  player4: { score: 100 }
});

const orderByKey = 'score';

// Your code here

Hint

Import limitToLast and add it as a parameter to the query call to get the top 3 players.

Practice

1. What does ordering data in Firebase do?

easy

A. Sorts the results by a chosen field

B. Deletes data from the database

C. Creates a new collection

D. Encrypts the data for security

Solution

1. Step 1: Understand the purpose of ordering

   Ordering data means arranging data in a specific sequence based on a field.

2. Step 2: Identify what ordering affects

   It changes how data is displayed, sorting it by the chosen field.

3. Final Answer:

   Sorts the results by a chosen field -> Option A

4. Quick Check:

   Ordering = Sorting [OK]

Hint: Ordering means sorting data by a field [OK]

Common Mistakes:

• Thinking ordering deletes data
• Confusing ordering with creating collections
• Believing ordering encrypts data

2. Which of the following is the correct syntax to order a Firebase query by the field age in ascending order?

easy

A. query.orderBy('age', 'asc')

B. query.orderBy('age', 'ascending')

C. query.orderBy('age', 'up')

D. query.orderBy('age', 'down')

Solution

1. Step 1: Recall Firebase orderBy syntax

   Firebase uses orderBy(field, direction) with direction as 'asc' or 'desc'.

2. Step 2: Match correct direction keyword

   'asc' is the correct keyword for ascending order, not 'ascending', 'up', or 'down'.

3. Final Answer:

   query.orderBy('age', 'asc') -> Option A

4. Quick Check:

   Ascending order = 'asc' [OK]

Hint: Use 'asc' or 'desc' exactly for order direction [OK]

Common Mistakes:

• Using 'ascending' instead of 'asc'
• Using 'up' or 'down' which are invalid
• Omitting the direction parameter

3. Given this Firebase query:

db.collection('users').orderBy('score', 'desc').limit(3)

What will this query return?

medium

A. The 3 users with the lowest scores

B. The 3 users with the highest scores

C. All users sorted by score ascending

D. An error because limit must come before orderBy

Solution

1. Step 1: Understand orderBy with 'desc'

   Ordering by 'desc' sorts data from highest to lowest.

2. Step 2: Apply limit(3)

   Limit returns only the first 3 results from the sorted list.

3. Final Answer:

   The 3 users with the highest scores -> Option B

4. Quick Check:

   orderBy 'desc' + limit(3) = top 3 [OK]

Hint: Descending order + limit = top results [OK]

Common Mistakes:

• Thinking 'desc' means lowest first
• Believing limit must come before orderBy
• Assuming all users are returned

4. You wrote this Firebase query:

db.collection('products').orderBy('price', 'ascending')

But it causes an error. What is wrong?

medium

A. orderBy cannot be used on 'products' collection

B. The field 'price' does not exist

C. The direction should be 'asc', not 'ascending'

D. Missing parentheses after orderBy

Solution

1. Step 1: Check the orderBy direction parameter

   Firebase expects 'asc' or 'desc' as direction, not 'ascending'.

2. Step 2: Confirm syntax correctness

   The rest of the query is valid if 'price' exists and parentheses are correct.

3. Final Answer:

   The direction should be 'asc', not 'ascending' -> Option C

4. Quick Check:

   Use 'asc' or 'desc' exactly [OK]

Hint: Use 'asc' not 'ascending' for order direction [OK]

Common Mistakes:

• Using 'ascending' instead of 'asc'
• Assuming orderBy can't be used on collections
• Forgetting parentheses after orderBy

5. You want to display a list of books ordered by publishedYear descending, but only those published after 2010. Which Firebase query is correct?

hard

A. db.collection('books').where('publishedYear', '>', 2010).orderBy('publishedYear', 'asc')

B. db.collection('books').orderBy('publishedYear', 'asc').where('publishedYear', '>', 2010)

C. db.collection('books').orderBy('publishedYear').where('publishedYear', '>', 2010)

D. db.collection('books').where('publishedYear', '>', 2010).orderBy('publishedYear', 'desc')

Solution

1. Step 1: Apply filtering before ordering

   Firebase requires that if you filter by a field, you must order by the same field.

2. Step 2: Use correct order direction

   We want descending order, so use 'desc' with orderBy.

3. Step 3: Check query chaining order

   Filtering with where() comes before orderBy() in the query chain.

4. Final Answer:

   db.collection('books').where('publishedYear', '>', 2010).orderBy('publishedYear', 'desc') -> Option D

5. Quick Check:

   Filter then order by same field desc [OK]

Hint: Filter first, then order by same field with 'desc' [OK]

Common Mistakes:

• Ordering before filtering causing errors
• Using wrong order direction
• Ordering by different field than filtered