How can I fix this? I have no idea what event loops, promises, async or await are. You can send me a link to an explanation, or just write me an explanation. However, this is not the main issue. The issue is that I am trying to get firebase data in a function starting on line 38, and I am getting [Object object] instead of the data. But, if I look into the firebase console, it's giving me [Object Promise] Here is the 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>Document</title>
</head>
<body>
<p id="i"></p>
<script type="module">
// Import the functions you need from the SDKs you need
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";
import { getDatabase, ref, set, get, child} from "https://www.gstatic.com/firebasejs/9.6.7/firebase-database.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
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyCnfB3Tfu9bo7PyEvhB1ZAPBbit7ZWm9D8",
authDomain: "square-1cdce.firebaseapp.com",
projectId: "square-1cdce",
storageBucket: "square-1cdce.appspot.com",
messagingSenderId: "82191280296",
appId: "1:82191280296:web:45e62faffbb7e8a94cfa9d",
measurementId: "G-NT53HS3WE9"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getDatabase()
const dbRef = ref(getDatabase());
var data={};
var x=prompt("Message:")
get(child(dbRef, "text")).then((snapshot) =>function(){
if (snapshot.exists()) {
data=snapshot.val()
} else {
data="No data available"
}
}).catch((error) => {
console.error(error);
});
set(ref(db, 'text/'), {
texts: get(ref(db, 'text/'))+"<br>"+x
});
document.getElementById("i").innerHTML= data;
</script>
</body>
</html>
Ps. I am a ten-year-old learning javascript. My father signed me up for classes.
Pss. I made the read and write values in the rules true, so anybody can change the data with this code.
You're making the write more complication than needed.
set(ref(db, 'text/'), {
texts: get(ref(db, 'text/'))+"<br>"+x
// 👆 This is not needed 👆
});
To write the value of x to the database, you can do:
set(ref(db, 'text/'), {
texts: x
});
If you want to append the value of x to the current value in the database, you'll need to use a transaction instead of set:
runTransaction(ref(db, 'text/texts'), (text) => {
return text + "<br>" + x;
});
A better way to store multiple values is to use a list though, in which can you can append the value of x to that list with:
push(ref(db, 'text/texts'), x);