Получить один элемент из базы данных Firebase Realtime

Question

Если кто-то может помочь, это будет высоко ценится.

Я пытаюсь получить один элемент из моей базы данных Firebase и поместить указанный элемент в таблицу. Однажды я выполнил свою задачу, но она не сохранилась правильно, и я потратил целую вечность, пытаясь настроить js

. Я стремлюсь получить userName из указанного c идентификатора команды, например, 1009254444.

База данных структурированных данных / xbox / 3787955 / team / 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;
}

js

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

    );

Answer 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 будет фактически l oop для каждого свойства: abbrName, awayLosses, awayTies, et c.

Вы, вероятно, хотите удалить l oop:

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