如何从 Firebase 中检索所有数据。当前的 getData() 函数只检索一个对象答案

【问题标题】：How to retrieve all data from firebase. The current getData() function only retrieves one object如何从 Firebase 中检索所有数据。当前的 getData() 函数只检索一个对象
【发布时间】：2019-09-08 14:30:08
【问题描述】：

我正在做一个用于输入和输出数据的 firebase 应用程序。我创建了一个将数据添加到 firebase 的函数，我想要一个函数来打印和更新网站上的所有数据

我尝试了一个函数，但它只检索最后一个对象，我想要所有这些对象。

function getData(){

    firebase.database().ref("/").on('value', function(snapshot){
      snapshot.forEach(function(childSnapshot){
        var childKey = childSnapshot.key;
        var childData = childSnapshot.val();
        document.getElementById("Data").innerHTML = childData['name'] + childData['age'];


      })
    })
  }

firebase 中的数据如下所示：

Database
|
|-JOHN
|  name: JOHN|
|  age: 45
|
|-JANE
   name: Jane
   age: 39

writeData() 函数只检索 JANE 的姓名和年龄。

【问题讨论】：

能否提供您的数据库结构截图
@ConstantinBeer 我在描述中添加了截图
您是否尝试在您的document.getElementById... 行之前使用console.log() 登录？你也只拿回简吗？
我添加了console.log()，没有任何改变在这个函数的情况下，我只得到了最后一个对象，我想要所有的对象。
基本上我想要一个列表，它会在每次将某些内容添加到数据库时自行附加，以便显示数据库中的所有内容。 @ConstantinBeer

标签： javascript html firebase firebase-realtime-database

【解决方案1】：

snapshot.forEach 的每次迭代都会完全替换 HTML 中 Data 元素的现有内容。因此，在该循环结束时，您将只拥有数据库中的最后一项。

最简单的解决方法是在循环之前清除元素，然后在每次迭代时追加内容：

firebase.database().ref("/").on('value', function(snapshot){
  let elm = document.getElementById("Data");
  elm.innerHTML = '';

  snapshot.forEach(function(childSnapshot){
    var childKey = childSnapshot.key;
    var childData = childSnapshot.val();
    elm.innerHTML += childData['name'] + childData['age'];
  })
})

【讨论】：