带有firebase的JavaScript中的变量
Posted
技术标签:
【中文标题】带有firebase的JavaScript中的变量【英文标题】:Variable in JavaScript with firebase 【发布时间】:2020-10-13 12:13:14 【问题描述】:我正在使用 html 和 javascript(通过 Glitch)以及 Firebase 创建一个简单的投票网站,我按照教程进行操作。我一切正常,投票工作正常,并按预期显示结果。我现在想获取结果并使用它们在我的 HTML 页面上显示图表。我了解这是如何工作的,而不是如何将投票结果变量放入图表的 JS 代码中。我正在使用charts.js,其代码位于底部。 y 值应该是读取总票数的变量,但它不起作用。有什么建议吗?
谢谢
var myStates = [];
var myTimes = [];
// Variables to hold the count for each state
var TrumpCount = 0;
var BidenCount = 0;
// Define database connection to correct child branch, MyTemperature
var myDBConn = firebase.database().ref("USvote");
// Function that acts when a 'new child is added to the DB' - i.e. new data is added this function runs.
myDBConn.on("child_added", function(data, prevChildKey)
TrumpCount = 0;
BidenCount = 0;
// The data returned from the branch is put into a variable, dataPoint
var dataPoint = data.val();
// Populate the lists with the various data from the database
myStates.push(dataPoint.USvote);
myTimes.push(dataPoint.Time);
// add 1 to the appropriate counter
for (i = 0; i < myStates.length; i++)
if (myStates[i] == "Trump")
TrumpCount = TrumpCount + 1;
if (myStates[i] == "Biden")
BidenCount = BidenCount + 1;
// Update the page elements with the results of each count
document.getElementById("TrumpCount").innerHTML = TrumpCount;
document.getElementById("BidenCount").innerHTML = BidenCount;
);
// JS code for using charts
JSC.Chart("chartDiv",
type: "column",
series: [
points: [ x: "Biden", y: BidenCount, x: "Trump", y: TrumpCount]
]
);
【问题讨论】:
【参考方案1】:仅在 firebase 已加载并执行所需操作时尝试放置 chart.js 代码。
试试这个:
var myStates = [];
var myTimes = [];
// Variables to hold the count for each state
var TrumpCount = 0;
var BidenCount = 0;
// Define database connection to correct child branch, MyTemperature
var myDBConn = firebase.database().ref("USvote");
// Function that acts when a 'new child is added to the DB' - i.e. new data is added this function runs.
myDBConn.on("child_added", function(data, prevChildKey)
TrumpCount = 0;
BidenCount = 0;
// The data returned from the branch is put into a variable, dataPoint
var dataPoint = data.val();
// Populate the lists with the various data from the database
myStates.push(dataPoint.USvote);
myTimes.push(dataPoint.Time);
// add 1 to the appropriate counter
for (i = 0; i < myStates.length; i++)
if (myStates[i] == "Trump")
TrumpCount = TrumpCount + 1;
if (myStates[i] == "Biden")
BidenCount = BidenCount + 1;
// Update the page elements with the results of each count
document.getElementById("TrumpCount").innerHTML = TrumpCount;
document.getElementById("BidenCount").innerHTML = BidenCount;
// JS code for using charts
JSC.Chart("chartDiv",
type: "column",
series: [
points: [ x: "Biden", y: BidenCount, x: "Trump", y: TrumpCount]
]
);
);
【讨论】:
感谢一百万,这行得通!你改变了什么?我看不出来。 问题是chartjs在firebase完成运行并执行您所做的操作之前加载。 var myDBConn = firebase.database().ref("USvote");是一个异步代码,而图表被放置在它之外,因此它在完成之前不会等待结果。我只是把它放在函数中等待异步完成 非常感谢!当我点赞“感谢您的反馈!声望低于 15 人的投票将被记录,但不要更改公开显示的帖子得分”时,我会收到此消息。以上是关于带有firebase的JavaScript中的变量的主要内容,如果未能解决你的问题,请参考以下文章
带有 JavaScript 函数的 Async-Await 或 Promises [关闭]
javascript firebase中的firebase消息
带有 WebView 的 Flutter 应用中的 Firebase 身份验证