Reading the direct data of the Realtime database with JavaScript

Question

This might seem a copy, but I can't find my answer on the internet. Here's what I want to:

I tried using the normal database.ref() things, but it is a direct data from the database, not in a ref group (like products, users etc.)

My code (the <> areas are writed correctly and working):

const firebaseConfig = {
    apiKey: <>,
    authDomain: <>,
    databaseURL: <>,
    projectId: <>,
    storageBucket: <>,
    messagingSenderId: <>,
    appId: <>
  };


firebase.initializeApp(firebaseConfig);

        const database = firebase.database();

        var test;

        database.ref("password").on('value',function(snapshot) {
            test = snapshot.val();
        });

        console.log(test);

But this just didn't work. (console just gives undefined message)

So, how can I access this data (the password from the screenshot) from my database?

Your question should show what code you tried and explain what it's doing that's different than what you expect, along with any errors or output. Right now what you have is too vague to answer. — Doug Stevenson, Aug 24 '23 at 19:38
Put the log in the database callback. The callback is asynchronous meaning it returns right away before the result is ready. The log will not show you the value where it is now. — Doug Stevenson, Aug 24 '23 at 19:43
what do you mean by a callback? (note: the `password` thing will stay on there and not will be changed to another value. i just need to read the value from javascript) — Batu Akyar, Aug 24 '23 at 19:56
You're going to have to learn about callbacks and asynchronous programming in order to make effective use of Firebase. Without this background, a lot of what Firebase does will be confusing to you. — Doug Stevenson, Aug 24 '23 at 20:43

Batu Akyar · Answer 1 · 2023-08-26T13:41:17.770

To retrieve data from a Firebase Realtime Database using JavaScript, you can follow these steps:

Initialize Firebase: Before you can interact with the Firebase database, you need to initialize the Firebase SDK with your project configuration. Make sure you have included the Firebase SDK in your HTML file.

<!-- Include the Firebase JavaScript SDK -->
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-database.js"></script>

<script>
  // Initialize Firebase with your project's configuration
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    databaseURL: "YOUR_DATABASE_URL",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
  };

  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

Retrieve Data: Once Firebase is initialized, you can use the firebase.database() API to access the database and retrieve data.

// Reference to the root of the database
const database = firebase.database();

// Reference to the 'password' node
const dataRef = database.ref('password');

// Retrieve data from the database
dataRef.once('value')
  .then(snapshot => {
    const data = snapshot.val(); // Get the data value
    console.log(data);
  })
  .catch(error => {
    console.error('Error retrieving data:', error);
  });

The once() function is used to fetch the data once. If you want to listen for changes in real-time, you can use the on() function instead of once().

Handle Data: The retrieved data will be in the form of a JavaScript object. You can then process this data as needed within the callback function.

Remember to replace the placeholder values in the firebaseConfig object with your actual Firebase project configuration.

Also, please note that Firebase SDK versions may change over time. Make sure to check the Firebase documentation for the most up-to-date information on initializing the SDK and accessing the Realtime Database using JavaScript.

Good to hear you got it working. Did ChatGPT also explain **why** this code works, while the original code in your question doesn't? — Frank van Puffelen, Aug 24 '23 at 22:38
@FrankvanPuffelen Yep, because I sended my question like on the Stack Overflow. Main difference is, it ACTUALLY typed a solution code. Thanks, Stack Overflow's members! — Batu Akyar, Aug 25 '23 at 19:18
Good to hear ChatGPT was helpful. To make this answer more helpful for future visitors, can you include the explanation of **why** this change solved the problem in your answer too? — Frank van Puffelen, Aug 25 '23 at 20:15
@FrankvanPuffelen added a detailed description to the answer, not like the others on this question which doesn't want to help about the question. — Batu Akyar, Aug 26 '23 at 13:43

Reading the direct data of the Realtime database with JavaScript

1 Answers1