Retrieve specific values in a Realtime Database

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" >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>

CodePudding user response：

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