Firebase Web-如何从数据库检索嵌套数据？不断找回[object Object]

Question

我是Firebase的新手，我正在尝试学习如何从Firebase检索嵌套数据并在网页上打印出来。我可以在控制台中打印出所有数据，但不能在网页上打印出来，然后我将在网页上返回[object Object]。有人可以请我解释一下为什么我的网页打印出[object Object]吗？与“ ref.on”或“ snap =>”有关吗？

这是我从Firebase获取数据的功能：

function GetData()
{
  var ref = firebase.database().ref('Scores');
  var PrintData = document.getElementById('PrintOutData');

  ref.on("value", function(snapshot) 
  {
    snapshot.forEach(function(childSnapshot) 
    {
      var childData = childSnapshot.val();
      var id=childData.id;
      console.log(childData);
      ref.on('value', snap => PrintData.innerText = childData);
    });
  });
}

这是我的控制台日志中的内容：console.png

这是我的网页上的内容：web.png

这是我在Firebase上的数据：

我想在我的网页上看到的内容是这样的：

name:"AAA", score:100, time:"30s"
name:"AAA", score:100, time:"30s"
...

非常感谢！

Answer 1

您可以使用：

 let keys = Object.keys(childData)
  keys.forEach(key => {
  let value = childData[key.toString()];
  console.log(value) // Use Value
  })

Answer 2

就像，看起来很糟糕。不知道为什么要嵌套on("value"侦听器，而且我也不知道.id的来源。您可能正在寻找符合以下条件的东西：

ref.on("value", function(snapshot) {
  PrintData.innerText = ""; // We got a new value, so clear the existing HTML
  snapshot.forEach(function(childSnapshot)  {
    var childData = childSnapshot.val();
    PrintData.innerText += "name: " + childData.name + " score: " + childData.score + " time: " + childData.time + "    ";
  });
});