Get single element from Firebase Realtime database

Question

If anyone can help it would be much appreciated.

I am trying to receive a single element from within my firebase database and place said element into a table. I have completed my task once but it didn't save correctly and I have spent an eternity trying to refigure the js

I aim to get the userName from a specific team ID for example 1009254444.

The database is structured data/xbox/3787955/teams/109254444 userName value is within this element "?"

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

The code I have so far is

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

This seems to be the relevant code:

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

This is reading the path /data/xbox/3787955/teams/1009254444 , which leads to this URL and this data:

{
  "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
}

Now in the callback you do snap.forEach . But there is no repeated structure in the JSON that you're reading, so this forEach will actually loop over each property: abbrName , awayLosses , awayTies , etc.

You probably want to remove the loop:

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

Or alternatively, listen one level higher in the tree, so that you get all teams:

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