JSFiddle - React, Tailwind, and code Playground

by kumartanwar123

JavaScript

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