从 Firebase 实时数据库中获取单个元素答案

【问题标题】：Get single element from Firebase Realtime database从 Firebase 实时数据库中获取单个元素
【发布时间】：2020-04-14 22:13:46
【问题描述】：

如果有人能提供帮助，将不胜感激。

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

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

数据库是结构化数据/xbox/3787955/teams/109254444 userName 值在此元素“？”内

https://cfm-stats.firebaseio.com/data.json

我目前的代码是

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>

css

    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>";
        });
      }

    );

【问题讨论】：

您在问题中包含了 JSON 树的图片，不幸的是，这并没有为我们提供关于数据路径的大量上下文。请将其替换为实际的 JSON 作为文本，您可以通过单击 your Firebase Database console 的溢出菜单 (⠇) 中的 Export JSON 链接轻松获得。将 JSON 作为文本使其可搜索，让我们可以轻松地使用它来测试您的实际数据并在我们的答案中使用它，一般来说这只是一件好事。
我已将图片替换为 json 链接。由于数据库大小，将文本放在这里会很乱。

标签： javascript firebase firebase-realtime-database

【解决方案1】：

这似乎是相关代码：

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>";
    });
  }
);

这是读取路径/data/xbox/3787955/teams/1009254444，这导致了这个URL和这个数据：

{
  "abbrName" : "BKN",
  "awayLosses" : 1,
  "awayTies" : 0,
  "awayWins" : 6,
  "calendarYear" : 2021,
  "capAvailable" : 5940000,
  "capRoom" : 218000000,
  "capSpent" : 212060000,
  "cityName" : "Brooklyn",
  "confLosses" : 4,
  "confTies" : 0,
  "confWins" : 7,
  "conferenceId" : 996409344,
  "conferenceName" : "AFC",
  "defPassYds" : 3036,
  "defPassYdsRank" : 14,
  "defRushYds" : 1464,
  "defRushYdsRank" : 15,
  "defScheme" : 14,
  "defTotalYds" : 4500,
  "defTotalYdsRank" : 14,
  "displayName" : "Beats",
  "divLosses" : 3,
  "divName" : "AFC East",
  "divTies" : 0,
  "divWins" : 2,
  "divisionId" : 1007288320,
  "divisionName" : "AFC East",
  "homeLosses" : 5,
  "homeTies" : 0,
  "homeWins" : 3,
  "injuryCount" : 1,
  "logoId" : 141,
  "netPts" : -1,
  "nickName" : "Beats",
  "offPassYds" : 2296,
  "offPassYdsRank" : 30,
  "offRushYds" : 1297,
  "offRushYdsRank" : 24,
  "offScheme" : 2,
  "offTotalYds" : 3593,
  "offTotalYdsRank" : 32,
  "ovrRating" : 81,
  "playoffStatus" : 1,
  "prevRank" : 1,
  "primaryColor" : 6501524,
  "ptsAgainst" : 26,
  "ptsAgainstRank" : 21,
  "ptsFor" : 26,
  "ptsForRank" : 12,
  "rank" : 10,
  "seasonIndex" : 2,
  "secondaryColor" : 11579052,
  "seed" : 6,
  "stageIndex" : 1,
  "tODiff" : 7,
  "teamId" : 1009254444,
  "teamName" : "Beats",
  "teamOvr" : 81,
  "totalLosses" : 6,
  "totalTies" : 0,
  "totalWins" : 9,
  "userName" : "SnapDan",
  "weekIndex" : 15,
  "winLossStreak" : 255,
  "winPct" : 0.6
}

现在在回调中执行snap.forEach。但是您正在阅读的 JSON 中没有重复的结构，因此 forEach 实际上会遍历每个属性：abbrName、awayLosses、awayTies 等。

您可能想要删除循环：

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>";
  }
);

或者，在树中聆听更高一级，以便获得所有团队：

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>";
    });
  }
);

【讨论】：