带有firebase的JavaScript中的变量

Posted

技术标签:

【中文标题】带有firebase的JavaScript中的变量【英文标题】:Variable in JavaScript with firebase 【发布时间】:2020-10-13 12:13:14 【问题描述】:

我正在使用 htmljavascript(通过 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 [关闭]

将环境变量部署到 Firebase 托管

javascript firebase中的firebase消息

带有 WebView 的 Flutter 应用中的 Firebase 身份验证

firebase.storage() 不是 JavaScript 中的函数

带有 Flutter 的 Firebase 中的唯一用户名