带有firebase的JavaScript中的变量

Posted 2023-02-25

【中文标题】带有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 人的投票将被记录，但不要更改公开显示的帖子得分”时，我会收到此消息。