db is not defined when i want to get data using javascript and firebase

Question

I want to get the data from my database using JavaScript and firebase, I have configured the firebase connection, but it gives me error: db is not defined.

I think the problem comes from the database configuration with firebase. because the tutorial configuration is different than that. I found this configuration in a post : previous solution

db.collection('courses').get()
  .then(res => console.log(res))
  .catch(err => console.error(err))

<!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>Document</title>
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
    <div class="container my-5">

        <div class="row">
            <div class="col-4 mx-auto">
                <h3 class="my-3 text-center"><span class="badge badge-info">MARZOUK</span></h3>

                <form>
                    <div class="input">
                        <div class="input-group">
                            <input type="text" class="form-control" id="course" placeholder="add new course">

                            <div class="input-group-apprend">
                                <input type="submit" class="btn btn-outline-secondary">
                            </div>
                        </div>
                    </div>
                </form>

            </div>
        </div>

        <ul class="list-group mt-2">
            <li class="list-group-item">element</li>
            <li class="list-group-item">element</li>
            <li class="list-group-item">element</li>
        </ul>
    </div>

<script type="module">

    import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.8.3/firebase-app.js';
    import { getFirestore, collection, getDocs } from 'https://www.gstatic.com/firebasejs/9.8.3/firebase-firestore-lite.js';
    
    const firebaseConfig = {
        apiKey: "Myapikey",
        authDomain: "javascript-3bbaa.firebaseapp.com",
        projectId: "javascript-3bbaa",
        storageBucket: "javascript-3bbaa.appspot.com",
        messagingSenderId: "<myId>",
        appId: "<MyappId>"
    };

    // Initialize Firebase
    const firebase = initializeApp(firebaseConfig);
    const db = getFirestore(firebase);
</script>

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>

score 0 · Answer 1 · answered Jun 24 '22 at 15:48

0

const db = getFirestore(firebase);

You define db as the very last thing in your module. It then immediately falls out of scope and will be garbage collected.

If you want to use it, then you need to do so in the same scope.

Presumably the JS you put in the JavaScript box of your live demo is from <script src="script.js"></script>. Move it into the module where you define db.

answered Jun 24 '22 at 15:48

Quentin

914,110
126
1,211
1,335

thx for u answer ,i try but its not work ,Unfortunately – kimkim Jun 24 '22 at 16:02
"it does not work" is really hard to help with. Can you edit your question to show what changed based on Quentin's answer, and the error you now get (if any different from the original)? – Frank van Puffelen Jun 24 '22 at 19:36

db is not defined when i want to get data using javascript and firebase

1 Answers1