堆栈内存溢出
  繁体   English   中英

无法使用 html 从 firebase 读取数据

[英]unable to read data from firebase using html

 原文  2022-09-08 20:07:09  0   2    javascript/ html/ firebase-realtime-database

问题描述

我可以从控制台查看 firebase 实时数据库中的数据，但如果我尝试通过 html/javascript 读取这些数据，它不会给我任何东西。 我尝试了两种不同的方法都没有奏效。 我不认为我可以在此处附加代码，因此我将尝试将代码 forms 放在下面。 数据格式如下：

这是修改后的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {text-align: center;}
        #findDetails {float: left; width: 50%; background-color: floralwhite; color: darkslategray;}
        input {width: 120px;}
    </style>
</head>
<body>

    <div id="findDetails">
        <h1>PUMP1</h1>

        <h3 id="Start-time" type="text"></h3>
        <h3 id="Cycle" type="text"></h3>
        <h3 id="Duration-hrs" type="text"></h3>
        <h3 id="Pumped-gals" type="text"></h3> <br><br>
    </div>

<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.9.4/firebase-app.js";
    import {getDatabase, ref, get, set, child, update, remove} from "https://www.gstatic.com/firebasejs/9.9.4/firebase-database.js"


const firebaseConfig = {
  apiKey: "AIzaSyAKQ4cRyBMBbjhsYpg5w96wVj_-qE4zUGw",
  authDomain: "pump-a559c.firebaseapp.com",
  databaseURL: "https://pump-a559c-default-rtdb.firebaseio.com",
  projectId: "pump-a559c",
  storageBucket: "pump-a559c.appspot.com",
  messagingSenderId: "838180391277",
  appId: "1:838180391277:web:df22c7d634310ae135b264"
};

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);

  // Initialize the database
  const db = getDatabase(app);

  const dbref = ref(db);

    get(child(dbref, "Sensor"))
    .then((snapshot)=>{
        snapshot.forEach((child)=>{
            Start-time.innerHTML = "Start-time: " + child.val().StartTime;
            Cycle.innerHTML = "Cycle: " + child.val().Cycle;
            Duration-hrs.innerHTML = "Duration-hrs: " + child.val().Duration;
            Pumped-gals.innerHTML = "Pumped-gals: " + child.val().GalsPumped;
     //       console.log(child.val().StartTime);
        } else {
            alert("No data found");
        }
    })
    .catch((error)=>{
        alert(error);
       });

    </script>
</body>
</html>

代码2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {text-align: center;}
        #findDetails {float: left; width: 50%; background-color: floralwhite; color: darkslategray;}
        input {width: 120px;}
    </style>
</head>
<body>
  
<ul id="list">

</ul>



<script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.9.4/firebase-app.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.9.4/firebase-database.js";
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries
  
    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    const firebaseConfig = {
      apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-qE4zUGw",
      authDomain: "pump-a559c.firebaseapp.com",
      databaseURL: "https://pump-a559c-default-rtdb.firebaseio.com",
      projectId: "pump-a559c",
      storageBucket: "pump-a559c.appspot.com",
      messagingSenderId: "838180391277",
      appId: "1:838180391277:web:df22c7d634310ae135b264",
      measurementId: "G-K66Z05LFCD"
    };
  
    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
        
        var pumpId=0;
        function addItemsToList(starttime,cycle,duration,pumped){
            var ul=document.getElementById('list');
            var header= document.createElement('h2');
            
            var _starttime= document.createElement('li');
            var _cycle= document.createElement('li');
            var _duration= document.createElement('li');
            var _pumped= document.createElement('li');

            _starttime.innerHTML='Start-time: '+starttime;
            _cycle.innerHTML='Cycle: '+cycle;
            _duration.innerHTML='Duration-hrs: '+duration;
            _pumped.innerHTML='Pumped-gals: '+pumped;

            ul.appendChild(header);
            ul.appendChild(_starttime);
            ul.appendChild(_duration);
            ul.appendChild(_pumped);
        }

        function FetchAllData(){
            firebase.database().ref('Sensor').once('value',function(snapshot){
                snapshot.forEach(
                    function(ChildSnapshot){
                        let start = ChildSnapshot.val().StartTime;
                        let cycle = ChildSnapshot.val().Cycle;
                        let duration = ChildSnapshot.val().Duration;
                        let pumped = ChildSnapshot.val().GalsPumped;
                        addItemsToList(start,cycle,duration,pumped);
                    }
                );
            });
        }
        window.onload(FetchAllData());

</script>

</body>
</html>

2 个解决方案

解决方案1
 1  2022-09-08 21:04:06

您正在加载整个Sensor节点，这意味着您将获得包含所有传感器数据的snapshot 。 要获取每个特定传感器的数据，您需要遍历该快照中的子节点。

所以：

get(child(dbref, "Sensor")
.then((snapshot)=>{
    snapshot.forEach((child)=>{
        Start-time.innerHTML = "Start-time: " + child.val().StartTime;
        Cycle.innerHTML = "Cycle: " + child.val().Cycle;
        Duration-hrs.innerHTML = "Duration-hrs: " + child.val().Duration;
        Pumped-gals.innerHTML = "Pumped-gals: " + child.val().GalsPumped;
    } else {
        alert("No data found");
    }
})
.catch((error)=>{
    alert(error);
});

解决方案2
 0  2022-09-10 19:55:04

下面的代码解决了这个问题，现在我得到了我的传感器数据

            .then((snapshot)=>{
                snapshot.forEach((child)=>{
                    id_PumpID.innerHTML = "Pump ID: " + child.val().PumpID
                    id_StartTime.innerHTML = "StartTime: " + child.val().StartTime;
                    id_Cycle.innerHTML = "Cycle: " + child.val().Cycle;
                    id_Duration.innerHTML = "Duration: " +  child.val().Duration;
                    id_GalsPumped.innerHTML ="GalsPumped: " + child.val().GalsPumped;
                 })
                });```

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 无法从 Firebase 读取数据 无法查询到Firebase的数据 如何使用 Flutter/Dart 从 Firebase 实时数据库中读取数据 无法在 AWS EMR 中使用 Pyspark 或 Python 从 mongoDB 读取数据 如何使用 (.get) 从 firebase 读取数据（一次读取） 读写数据Firebase Recyclerview 无法从 Firebase 检索双重数据/值 处理从Firebase获取的文档快照的数据是否算读？ 为什么无法从数据库 Firebase 读取数据？ 如何在django中将数据从html表单推送到firebase实时数据库（使用pyrebase）？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM