Javascript 从Firebase实时数据库获取单个元素

如果有人能帮忙，我将不胜感激

我试图从firebase数据库中接收单个元素，并将所述元素放入表中。我已经完成了一次任务，但没有正确保存，我花了很长时间试图重新配置js

我的目标是从特定的团队ID获取用户名，例如1009254444

数据库为结构化数据/xbox/3787955/teams/10925444用户名值在此元素“”中

到目前为止，我掌握的代码是

HTML

    <!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase.js"></script>

<div class="table-responsive">
  <table class="table table-hover table-standings sortable">
    <table>
      <thead>
        <th>Coach</th>
      </thead>
      <tbody id='userName'></tbody>
    </table>
  </table>
</div>

js

    table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 3px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

tr:hover {
  background-color: #aa010b;
  color: #ffffff;
}

        // Your web app's Firebase configuration
        var firebaseConfig = {
          apiKey: "****",
          authDomain: "****",
          databaseURL: "****",
          projectId: "cfm-stats",
          storageBucket: "****",
          messagingSenderId: "****",
          appId: "****",
          measurementId: "****"


}

    ;
    firebase.initializeApp(firebaseConfig);
    var rootRef = firebase.database().ref('data/xbox/3787955/teams');
    var ref = rootRef.child('1009254444');
    ref.on('value', function(snap) {
        document.getElementById("userName").innerHTML = "";
        snap.forEach(function(child) {
          var childData = child.val();
          var userName = childData.userName;
          document.getElementById("userName").innerHTML += "<tr><td> " + userName + "</td></tr>";
        });
      }

    );

//您的web应用的Firebase配置
var firebaseConfig={
apiKey:“*****”，
authDomain:“*****”，
数据库URL:“*****”，
projectId:“cfm统计数据”，
storageBucket:“*****”，
messagingSenderId:“*****”，
appId:“*****”，
计量单位：“*****”
}
;
firebase.initializeApp（firebaseConfig）；
var rootRef=firebase.database（）.ref（'data/xbox/3787955/teams'）；
var ref=rootRef.child（'1009254444'）；
参考on（值），功能（捕捉）{
document.getElementById（“用户名”）.innerHTML=“”；
snap.forEach（函数（子函数）{
var childData=child.val（）；
var userName=childData.userName；
document.getElementById（“用户名”）.innerHTML+=“用户名+”；
});
}
);

这似乎是相关的代码：

firebase.initializeApp(firebaseConfig);
var rootRef = firebase.database().ref('data/xbox/3787955/teams');
var ref = rootRef.child('1009254444');
ref.on('value', function(snap) {
    document.getElementById("userName").innerHTML = "";
    snap.forEach(function(child) {
      var childData = child.val();
      var userName = childData.userName;
      document.getElementById("userName").innerHTML += "<tr><td> " + userName + "</td></tr>";
    });
  }
);

现在在回调中执行

snap.forEach

。但是您正在阅读的JSON中没有重复的结构，因此这个

forEach

实际上将在每个属性上循环：

abbrName

，

awayloss

，

awayies

，等等

您可能希望删除循环：

ref.on('value', function(snap) {
    document.getElementById("userName").innerHTML = "";
    var childData = snap.val();
    var userName = childData.userName;
    document.getElementById("userName").innerHTML += "<tr><td> " + userName + "</td></tr>";
  }
);

ref.on（'value'，函数（捕捉）{
document.getElementById（“用户名”）.innerHTML=“”；
var childData=snap.val（）；
var userName=childData.userName；
document.getElementById（“用户名”）.innerHTML+=“用户名+”；
}
);

或者，在树中听高一级，这样您可以得到所有团队：

firebase.initializeApp(firebaseConfig);
var rootRef = firebase.database().ref('data/xbox/3787955/teams');
rootRef.on('value', function(snap) {
    document.getElementById("userName").innerHTML = "";
    snap.forEach(function(child) {
      var childData = child.val();
      var userName = childData.userName;
      document.getElementById("userName").innerHTML += "<tr><td> " + userName + "</td></tr>";
    });
  }
);

firebase.initializeApp（firebaseConfig）；
var rootRef=firebase.database（）.ref（'data/xbox/3787955/teams'）；
rootRef.on（'value'，函数（snap）{
document.getElementById（“用户名”）.innerHTML=“”；
snap.forEach（函数（子函数）{
var childData=child.val（）；
var userName=childData.userName；
document.getElementById（“用户名”）.innerHTML+=“用户名+”；
});
}
);

您的问题中包含了一幅JSON树的图片，不幸的是，这并没有为我们提供很多数据路径的上下文。请将其替换为实际的JSON文本，您可以通过单击溢出菜单中的导出JSON链接轻松获得该文本(⠇) 当然。将JSON作为文本可以进行搜索，使我们能够轻松地使用它来测试您的实际数据，并在我们的答案中使用它，这通常是一件好事。我已经用JSON链接替换了图像。由于数据库的大小，将文本放在这里会很混乱。

firebase.initializeApp(firebaseConfig);
var rootRef = firebase.database().ref('data/xbox/3787955/teams');
rootRef.on('value', function(snap) {
    document.getElementById("userName").innerHTML = "";
    snap.forEach(function(child) {
      var childData = child.val();
      var userName = childData.userName;
      document.getElementById("userName").innerHTML += "<tr><td> " + userName + "</td></tr>";
    });
  }
);