Advertisements
My aim is to be able to retrieve certain values from a realtime database on firebase via javascript. I have everything configured and it works perfectly,but I don’t know how to retrieve the individual fields when I click a simple button.
This is an example of the values I would like to be able to take
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button type="submit" id="searchData" class="btn btn-primary">Search data</button>
</body>
</html>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.8/firebase-app.js";
import { getDatabase, set, ref ,push, child, onValue} from "https://www.gstatic.com/firebasejs/9.6.8/firebase-database.js";
const firebaseConfig = {
apiKey: "********************************",
authDomain: "********************************",
databaseURL: "********************************",
projectId: "********************************",
storageBucket: "****************************",
messagingSenderId: "******************",
appId: "********************************"
};
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
searchData.addEventListener('click',(e) => {
//
});
</script>
>Solution :
you can try using this example I always implement, note my main file is users, then my key value as id is userId then I have the attributes username and useremail. Try this:
I want to obtain a name:
const dbRef=ref(db, 'users/'+userId);
onValue(dbRef, (snapshot)=>{
const data=snapshot;
for(let i in data){
console.log(snapshot.val().username);
txtCont.innerHTML=`<p>${snapshot.val().username}</p>`;
}
});