Reading data (once and listener) in Firebase - Mini Project: Build & Apply

Reading data (once and listener)

📖 Scenario: You are building a simple app that shows user profiles stored in Firebase Realtime Database. You want to read the user data once to display it initially, and then listen for any changes to update the display automatically.

🎯 Goal: Learn how to read data once from Firebase Realtime Database and set up a listener to get real-time updates.

📋 What You'll Learn

Create a reference to the Firebase Realtime Database path /users/user1

Read the data once from the reference

Set up a listener to listen for changes at the reference

Handle the data snapshot correctly in both cases

💡 Why This Matters

🌍 Real World

Reading data once is useful for initial data loads, while listeners keep your app updated in real time, like chat apps or live dashboards.

💼 Career

Understanding how to read and listen to Firebase data is essential for building responsive cloud-connected applications.

1

Create a Firebase database reference

Create a variable called userRef that references the Firebase Realtime Database path /users/user1 using firebase.database().ref().

Firebase

# Create a Firebase database reference to '/users/user1'
# Your code here

Need a hint?

Use firebase.database().ref('/users/user1') to get the reference.

2

Read data once from the reference

Use the userRef variable and call once('value') to read the data once. Add a callback function that receives a snapshot parameter.

Firebase

const userRef = firebase.database().ref('/users/user1');
// Read data once from userRef
// Your code here

Need a hint?

Use userRef.once('value').then(callback) and inside the callback get data with snapshot.val().

3

Set up a listener for real-time updates

Use the userRef variable and call on('value') to listen for changes. Add a callback function that receives a snapshot parameter.

Firebase

const userRef = firebase.database().ref('/users/user1');
userRef.once('value').then((snapshot) => {
  const userData = snapshot.val();
});
// Set up a listener for real-time updates
// Your code here

Need a hint?

Use userRef.on('value', callback) to listen for data changes.

4

Stop listening to data changes

Call userRef.off('value') to stop listening for changes on the userRef reference.

Firebase

const userRef = firebase.database().ref('/users/user1');
userRef.once('value').then((snapshot) => {
  const userData = snapshot.val();
});
userRef.on('value', (snapshot) => {
  const updatedUserData = snapshot.val();
});
// Stop listening to data changes
// Your code here

Need a hint?

Use userRef.off('value') to remove the listener.