javascript - 如何从 firebase 检索所有数据。当前的 getData() 函数只获取一个对象

Question

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

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