javascript - 如何从Firebase检索所有数据。当前的getData()函数仅检索一个对象

我正在做一个用于输入和输出数据的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的名称和年龄。

最佳答案

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'];
  })
})