How to fetch data from firebase without using jQuery ?

Question

I had connected a firebase with one of my code. But I don't know how to fetch. I followed it's docs and some videos on YouTube, but couldn't fetch.
https://code.sololearn.com/W34nA0AkFRUX/?ref=app

How can I fetch data and show in innerHTML of any heading or paragraph ? I have not learnt jQuery or any library. So please tell me how to do that using JavaScript

Please don't tell to first search and ask or post any rule regulation of sololearn, because I had searched first, but didn't get anything.

Answer 1

Shri Hari L
But bro now another problem is arising.
I did as you told. But, every time I input data in one tab, it repeatedly writes all the emails and names again and again.

Like

Name 1
Name 2
Name 3
Name 4

Email 1
Email 2
Email 3
Email 4

Name 1
Name 2
Name 3
Name 4
Name5

Email 1
Email 2
Email 3
Email 4
Email5

Name 1
Name 2
Name 3
Name 4
Name5
Name6

Email 1
Email 2
Email 3
Email 4
Email 5
Email6

Answer 2

Shri Hari L
But I want like this

Name 1
Email 1

Name 2
Email 2

Name 3
Email 3

And every time user inputs something, it will add to the end, but not repeatedly write all the emails and names again and again.

Answer 3

You can do something like this.

var data = firebase.database().ref('users/');
data.on('value', function(snapshot) {

var val = snapshot.val();
Object.keys(val).forEach((key) => {
const mail = val[key]['email'];
console.log(mail);
});

});

And then,
const element = document.getElementById("data");
element.innerHTML = "Fetched Data";

Reference: https://firebase.google.com/docs/web/setup

Answer 4

Shri Hari L
Bro I tried to fetch data from database to an innerHTML, but it only fetches the last data. But I want to fetch all the data from the database.

https://code.sololearn.com/W34nA0AkFRUX/?ref=app

It only fetches the last name and email, but I want to fetch all the emails and names and show in innerHTML.

Answer 5

Prasant No you are doing it right.
But your updation overrides all.
const element = document.getElementById("data");
element.innerHTML += mail + "<br>";

Try updating like this, so that it appends the data

Answer 6

Prasant
Then you could make that element empty after fetching the value, like this.

var val = snapshot.val();
document.getElementById('ELE-ID').innerHTML = "";

So that it will not repeat.

Answer 7

Shri Hari L
No bro
Couldn't do anything 😔😭
Please explain it in the code while debugging it🙏🏻🙏🏻🙏🏻