FIrebase realtime database with JavaScript

January 4, 2022

I’m trying to create a project using JavaScript and a firebase realtime database. Now I want to list the data from the database on the page. But I can’t try my code because I get this error:

Uncaught TypeError: firebase.database is not a function
at index.html:69

My code at line 69:

const issuesRef = firebase.database().ref('student/');

And this is my whole code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  

    <title>Project</title>
</head>
<body>

    <button id="Insbtn">List items</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/8.2.2/firebase-app.js"> 
    </script>


    <script type="module">
    
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js";
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries

    // Your web app's Firebase configuration
    const firebaseConfig = {
        apiKey: "...",
        authDomain: "...",
        databaseURL: "...",
        projectId: "...",
        storageBucket: "...",
        messagingSenderId: "...",
        appId: "..."
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);

    import { getDatabase, ref, set, child, update, remove, onValue } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-database.js";


    const db = getDatabase();
    const issuesRef = firebase.database().ref('student/');

    function readIssues() {
        issuesRef.on("value", function(snapshot) {
            snapshot.forEach(snap => {
                const issue = snap.val();
                console.log(issue.NameOfStd);
            })
        }
    )}
    
    var insBtn = document.getElementById("Insbtn");
    insBtn.addEventListener('click', readIssues);


    </script>
</body>

</html>

>Solution :

You are using the new Modular SDK but using older name-spaced syntax to create a DatabaseReference and listening to it. Try refactoring the code as shown below:

import { getDatabase, ref, set, child, update, remove, onValue } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-database.js";

const db = getDatabase();
const issuesRef = ref(db, 'student');

function readIssues() {
  onValue(issuesRef, (snapshot) => {
    snapshot.forEach(snap => {
      const issue = snap.val();
      console.log(issue.NameOfStd);
    })
});

The documentation has examples of both name-spaced and functional syntax.