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);