如何仅使用 JS、HTML 和 CSS 从 Firebase 检索和显示数据答案

【问题标题】：How to retrieve and display data from Firebase ONLY with JS, HTML and CSS如何仅使用 JS、HTML 和 CSS 从 Firebase 检索和显示数据
【发布时间】：2021-06-21 00:13:23
【问题描述】：

在 firebase 我有以下孩子：

Temperature: 40
busvoltageOUT1: 10.192
busvoltageOUT2: 0.872
current_mAOUT1: 372.3
current_mAOUT2: -0.1
loadvoltageOUT1: 10.22893
loadvoltageOUT2: 0.87197
object: "abracadabra"
shuntvoltageOUT1: 36.93
shuntvoltageOUT2: -0.03

想法是这些孩子的值改变了HTML中的整数属性值，为此我做了如下代码

HTML：

    <div id = "progress-circle" class = "progress-circle" data-progress = "0" data-exact = "0"> </div>

JS：

    database.ref (). on ("value", function (snap) {
        loadvoltageOUT1 = snap.val (). loadvoltageOUT1;
        var integer = loadvoltageOUT1.toFixed ();
        var exact = loadvoltageOUT1.toFixed (2);
        var div = document.getElementById ("progress-circle");
        div.setAttribute ("data-progress", integer);
        div.setAttribute ("exact-data", exact);
        $ ('# progress-circle'). attr ('data-exact', exact);
        
        if (loadvoltageOUT1 <1) {
          $ (". VRango"). Text ("Battery Disconnected or Completely Damaged");
            }
      });

我在一年前编写了这段 Javascript 代码，它运行良好，但随着最新的 Javascript 更新，我的代码停止工作。但是，我仍然找不到错误，控制台也没有显示错误...

提前感谢您的帮助！

【问题讨论】：

标签： javascript html css firebase firebase-realtime-database

【解决方案1】：

您的数据库结构是什么样的？您需要在ref()中输入您要查找的资源的路径。

database.ref("/path/to/resource").once("value").then((snap) => {
  const data = snap.val()
  const loadvoltageOUT1 = data.loadvoltageOUT1;
  // Similarly get other fields

  const integer = loadvoltageOUT1.toFixed();
  const exact = loadvoltageOUT1.toFixed(2);


  var div = document.getElementById ("progress-circle");
  div.setAttribute("data-progress", integer);
  div.setAttribute("exact-data", exact);
  $('# progress-circle').attr('data-exact', exact);
        
  if (loadvoltageOUT1 <1) {
    $ (". VRango"). Text ("Battery Disconnected or Completely Damaged");
  }
});

您可以类似地获取指定路径中的其他字段。确保 ref 正确。

【讨论】：

【解决方案2】：

对于那些需要它的人来说，这是你解决问题的方法（在唯一答案的帮助下），应该澄清你需要jquery

    // ------ BATTERY VOLTAGE ------
    
    // get selected information from firebase
    
   firebase.database (). ref (). on ('value', (snap) => {
   const data = snap.val ()
   const loadvoltageOUT1 = data.loadvoltageOUT1;
  
   // convert the obtained values to integral and exact numbers

   const integer = loadvoltageOUT1.toFixed ();
   const exact = loadvoltageOUT1.toFixed (2);
      
   // set the received information to the css circles

   var div = document.getElementById ("progress-circle1");
   div.setAttribute ("data-progress", integer);
   div.setAttribute ("exact-data", exact);
   $ ('# progress-circle'). attr ('data-exact', exact);
        
  
});

【讨论】：