Отображение данных из базы данных Firebase в HTML-документ

#javascript #html #firebase #firebase-realtime-database

#javascript #HTML #firebase #firebase-база данных в реальном времени

Вопрос:

Я пытаюсь отобразить данные из базы данных Firebase в HTML-документе. Ниже вы можете увидеть как мой HTML-файл, так и файл JavaScript. Я довольно новичок в Firebase, поэтому, скорее всего, допустил ошибку. Ценю все ответы!

Заранее спасибо!

HTML:

 <p id="profile"></p>

<table id="profiledetails-table">
    <tr id="tr">
        <th>Name</th>
        <th>Email</th>
    </tr>
</table>
  

Javascript:

 firebase.auth().onAuthStateChanged(function(user) {
    var docRef = db.collection('users').doc(firebase.auth().currentUser.uid)

    docRef.get().then(function(snapshot) {
        if (doc.exists) {
            console.log("Document data:", doc.data());

            $('#profiledetails-table').append(doc.data);

        } else {
            console.log("No such document!");
        }
    }).catch(function(error) {
      console.log("Error getting document:", error);
    })
});
  

Ответ №1:

Вы пытаетесь использовать неопределенную переменную (и ваш редактор / IDE должен был вас предупредить): вы используете, if (doc.exists) но doc не определено, следовательно doc.exists всегда будет неопределенным, или у вас должно быть какое-то сообщение об ошибке типа «Не удается прочитать свойство существует неопределенного» в ваших devtools.

Возможно, вы захотите сделать это именно так:

 firebase.auth().onAuthStateChanged(function(user) {
    var docRef = db.collection('users').doc(firebase.auth().currentUser.uid)

    docRef.get().then(function({ doc }) {
        if (doc.exists) {
            console.log("Document data:", doc.data());

            $('#profiledetails-table').append(doc.data);

        } else {
            console.log("No such document!");
        }
    }).catch(function(error) {
      console.log("Error getting document:", error);
    })
});  

Я действительно не знаю jQuery, поэтому не могу быть уверен, что в способе добавления данных в вашу таблицу нет ошибки, поэтому вы можете захотеть взглянуть на это, если это не сработает.

Ответ №2:

Как упоминал @Camille, вам нужно использовать snapshot.exists и snapshot.data().