使用 Javascript 显示 firebase 实时数据库条目答案

【问题标题】：Displaying firebase realtime database entries using Javascript使用 Javascript 显示 firebase 实时数据库条目
【发布时间】：2019-09-25 18:45:53
【问题描述】：

我正在使用 firebase 实时数据库来显示我的网络应用上的用户可以提交的信息。提交页面正在使用中，特定用户将信息提交到我的数据库，该信息显示在所述个人资料页面上（这是我卡住的地方）。

This is what the database looks like

This is what the submit form looks like

这是提交的 JS

function writeUserData() {

  var user = firebase.auth().currentUser;
  var userDisplayName = user.displayName;
  var userid = user.uid;
  var getFieldID = document.getElementById('id_field').value;
  var getFieldName = document.getElementById('name_field').value;
  var getFieldDate = document.getElementById('dateField').value;
  var getFieldTime = document.getElementById('timeField').value;
  var getFieldDesc = document.getElementById('desc').value;


  const db = firebase.database();

  

	db.ref('teachers/' + getFieldID).push({
    student_UID: userid,
    student_displayName: userDisplayName,
    teacher_ID: getFieldID,
    teacher_name: getFieldName,
    date: getFieldDate,
    time: getFieldTime,
    description: getFieldDesc
	}); 
  

};

然后如何获取该用户数据并将其显示在特定页面上？我浏览了 大多数 firebase for web 上的文档，但找不到任何东西。

现在使用 DB，可以使用 .push 函数提交和创建同一 'id' 下的多个提交。我的问题是检索数据并能够在网页上显示特定子项（例如 test1、test 2）下的所有提交。

感谢您的帮助！

【问题讨论】：

标签： javascript html database firebase firebase-realtime-database

【解决方案1】：

您需要保存一份参考资料。

const teacherRef = db.ref('teachers/' + getFieldID).push({
    student_UID: userid,
    student_displayName: userDisplayName,
    teacher_ID: getFieldID,
    teacher_name: getFieldName,
    date: getFieldDate,
    time: getFieldTime,
    description: getFieldDesc
}); 

console.log('teacherRef key', teacherRef.key);

teacherRef.once('value', snapshot => {
  const value = snapshot.val();

  console.log('saved value', value);
})

【讨论】：