Data not working in global scope but in local scope

Question

I have been trying to make an e-commerce website and in that almost all things are done except for the database part. In which I have to fetch the data from firebase and use it in the products section. I have fetched the data in local variables, however I want to store the data in a global scoped object, but it is not working. So what I basically want is I want to fetch the data from firebase(DONE) and store it in global scope object(PENDING) so that I can use this object in other .js files. Any kind of idea/advice/help/suggestion in more than welcomed!! Thanks in advance!

This is my code: https://jsfiddle.net/kumartanwar123/gseh4coq/

OR

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.7/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.7/firebase-analytics.js";
// GLOBAL VARIABLES
var name, images, prices;
const firebaseConfig = {
  apiKey: "--",
  authDomain: "--",
  databaseURL: "--",
  projectId: "round-device-336118",
  storageBucket: "round-device-336118.appspot.com",
  messagingSenderId: "--",
  appId: "--",
  measurementId: "--",
};
const app = initializeApp(firebaseConfig);
firebase.initializeApp(firebaseConfig);
class firebase_class {
  constructor(Images, Prices, Name) {
    this.Images = Images;
    this.Prices = Prices;
    this.Name = Name;
  }
}
// FIREBASE DATA FETCH
firebase
  .database()
  .ref("Practice")
  .on("value", function (all_data) {
    all_data.forEach(function (current_data) {
      name = Object.keys(current_data.val().Name).map(
        (keys) => current_data.val().Name[keys]
      );
      //In this if I use console.log(name) then it is working just fine, but not in outside the function.
      images = Object.keys(current_data.val().Images).map(
        (keys) => current_data.val().Images[keys]
      );
      prices = Object.keys(current_data.val().Prices).map(
        (keys) => current_data.val().Prices[keys]
      );
    });
  });
let firebase_object = new firebase_class(images, prices, name);

Variables declared in a module are not global, they're local to the module they're declared in. — Teemu, Mar 23 '22 at 13:12
I can use import/export for that case, however as it stands I can't even use the variables in the same file. — Anuj Tanwar, Mar 23 '22 at 17:46

score 0 · Answer 1 · answered Mar 23 '22 at 13:34

The problem is not where you access the database, but when you access it.

Data is loaded from Firebase (and pretty much all modern cloud APIs) asynchronously, and your main code (and thus the let firebase_object = new firebase_class(images, prices, name)) continues to execute while the data is loaded. Then when the data is available, your callback is invoked with it and it sets images, prices, and name.

And code that needs the data from Firebase has to be inside the callback, or be called from there. So:

// FIREBASE DATA FETCH
firebase
  .database()
  .ref("Practice")
  .on("value", function (all_data) {
    all_data.forEach(function (current_data) {
      name = Object.keys(current_data.val().Name).map(
        (keys) => current_data.val().Name[keys]
      );
      //In this if I use console.log(name) then it is working just fine, but not in outside the function.
      images = Object.keys(current_data.val().Images).map(
        (keys) => current_data.val().Images[keys]
      );
      prices = Object.keys(current_data.val().Prices).map(
        (keys) => current_data.val().Prices[keys]
      );
    });
    // 
    let firebase_object = new firebase_class(images, prices, name);
    ... any use of firebase_object should be here too
  });

Also check out:

Why Does Firebase Lose Reference outside the once() Function?

You will need to ensure the code in that function executes *after* your `on` handler. For example, you could call the function inside the callback after the `let firebase_object = new firebase_class(images, prices, name);` executes. I also showed other ways in my answer to the question I linked. — Frank van Puffelen, Mar 23 '22 at 17:49
Yeah, I saw that, and I tried to use promise, but I realised that on() takes two arguments and if not then it gives some error like "Query.on failed: Was called with 1 argument. Expects at least 2." — Anuj Tanwar, Mar 23 '22 at 18:34
Calling `on` attaches a permanent listener, and its callback can be invoked multiple times, so there's no way for that to return a promise. If you only care about a value once, use `once` or `get` which already return a promise. — Frank van Puffelen, Mar 23 '22 at 18:51

Data not working in global scope but in local scope

1 Answers1