javascript - 从 Firebase 实时数据库中获取单个元素
问题描述
如果有人可以提供帮助,将不胜感激。
我正在尝试从我的 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;
}
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>";
});
}
);
解决方案
这似乎是相关的代码:
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>";
});
}
);
推荐阅读
- javascript - 在父边框的 View 中显示以下 TouchableOpacity 选项
- c# - 如何将数据库从测试(QA)服务器连接到 SSMS(SQL Server 2017)?
- c# - 由于 ERR_HTTP2_INADEQUATE_TRANSPORT_SECURITY,ASP.NET Core 3.0 应用程序无法在 Windows Server 2012 R2 上运行
- java - 从 AS 部署后无法访问 Endpoint,为什么?
- r - 浏览器中的 Rmarkdown 选项卡名称
- sql - 返回两个字段不同的查询结果 (Access 2010)
- angular - 当作为表达式调用时无法解析类装饰器的签名
- java - 为什么我不能将它上传到数据库?(JavaFX)
- c# - 从 Dictionary 对象中检索 XElement (
>) 其中包含使用 Linq 的 XElement 列表 - gnuplot - 如何在 Gnuplot 的 splot 函数上应用漂亮的褪色边缘遮挡?