Javascript 如何将Firestore文档中的所有数据显示为html元素_Javascript_Html_Firebase_Google Cloud Firestore

Javascript 如何将Firestore文档中的所有数据显示为html元素

javascript html firebase google-cloud-firestore

Javascript 如何将Firestore文档中的所有数据显示为html元素,javascript,html,firebase,google-cloud-firestore,Javascript,Html,Firebase,Google Cloud Firestore,我正在设计一个网页，从firestore集合中获取数据，并显示每个文档及其相应字段代码如下： <html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont

我正在设计一个网页，从firestore集合中获取数据，并显示每个文档及其相应字段代码如下：

<html>
<!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">
    <title>Stations</title>

    <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>


        <script>
                firebase.initializeApp({
                    apiKey: "XXXXXXXXXXXXX",
                    authDomain: "XXXXXXXXXXXXXX",
                    projectId: "XXXXXXXXXXX",
                });

                const db = firebase.firestore();
                db.settings({ timestampsInSnapshots: true });


                window.onload = function(){
                db.collection('Nairobi').get().then((snapshot) => {

                    // var data = snapshot.data();
                    snapshot.forEach(function (child) {
                        var name_loc = child.id;
                        var loc = child.data().marker;
                        var forward = child.data().ForwardPower;
                        var reflected = child.data().ReflectedPower;

                        var ups = child.data().UPSError;
                        var upsDesc = child.data().UPSDesc;
                        var trans = child.data().TransmitterError;
                        var transDesc = child.data().TransDesc;




                    document.getElementById('station').innerHTML = name_loc;
                    document.getElementById('forward').innerHTML = 'Forward Power:' + forward;



                    })
                })
                }



            </script>



</head>

<body>

    <nav class="navbar navbar-dark bg-primary">
        <a class="navbar-brand" href="#">Radio Africa</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="./trialmap.php">Maps</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="./stations.php">Stations <span class="sr-only">(current)</span></a>
                </li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>

        </div>
    </nav>



    <div id="accordion">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h5 class="mb-0">
                    <button id="station" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
                        aria-controls="collapseOne">

                    </button>
                </h5>
            </div>

            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                <div class="card-body">
                    <p id="forward"> </p>
                </div>
            </div>
        </div>

    </div>





</body>



</html>


车站
firebase.initializeApp({
apiKey:“xxxxxxxxxxxx”，
authDomain:“XXXXXXXXXXXXX”，
projectId:“xxxxxxxxxx”，
});
const db=firebase.firestore（）；
db.settings（{timestampsInSnapshots:true}）；
window.onload=函数（）{
db.collection（'Nairobi'）.get（）。然后（（快照）=>{
//var data=snapshot.data（）；
snapshot.forEach（函数（子函数）{
var name_loc=child.id；
var loc=child.data（）.marker；
var forward=child.data（）.ForwardPower；
var reflected=child.data（）.ReflectedPower；
var ups=child.data（）.UPSError；
var upsDesc=child.data（）.upsDesc；
var trans=child.data（）.TransmitterError；
var transDesc=child.data（）.transDesc；
document.getElementById（'station'）。innerHTML=name\u loc；
document.getElementById（'forward'）.innerHTML='forward Power:'+forward；
})
})
}

我的firestore收藏的结构如下：

这样做的目的是获取文档的名称，并将其显示为id=“station”按钮的名称，同时获取Forwardpower并显示它

但是在加载页面时，只显示一个文档，并且控制台中没有错误。

网页更新图片

您正在用循环替换元素内容。结果将仅显示最后一行

你似乎在试着把它列一个清单。下面是一个例子：

<!-- Consider your list in HTML -->
<div id="accordion"></div>

<script>
db.collection('Nairobi').get().then((s) => {
   $("#station").html(""); // This will empty your station button
   $("#station_box").html(""); // This will empty your station box
   var n = 0;
   s.forEach(function(x){
      $("#accordion").append(`
<div class="card">
  <div class="card-header" id="heading`+ n +`">
      <h5 class="mb-0">
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapse`+ n+`">`+ x.id +`</button>
      </h5>
   </div>

   <div id="collapse`+ n +`" class="collapse" data-parent="#accordion">
      <div class="card-body">
         <p>`+ x.data().ForwardPower +`</p>
      </div>
   </div>
</div>
`);

      n += 1;
   });
});
</script>


db.collection（'Nairobi'）.get（）。然后（（s）=>{
$（“#站”）.html（“”；//这将清空您的站按钮
$（“#station_box”）.html（“”；//这将清空您的station box
var n=0；
s、 forEach（函数（x）{
$（“#手风琴”）。追加(`
`+x.id+`
`+x.data（）.ForwardPower+`
`);
n+=1；
});
});

您正在用循环替换元素内容。结果将仅显示最后一行

你似乎在试着把它列一个清单。下面是一个例子：

<!-- Consider your list in HTML -->
<div id="accordion"></div>

<script>
db.collection('Nairobi').get().then((s) => {
   $("#station").html(""); // This will empty your station button
   $("#station_box").html(""); // This will empty your station box
   var n = 0;
   s.forEach(function(x){
      $("#accordion").append(`
<div class="card">
  <div class="card-header" id="heading`+ n +`">
      <h5 class="mb-0">
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapse`+ n+`">`+ x.id +`</button>
      </h5>
   </div>

   <div id="collapse`+ n +`" class="collapse" data-parent="#accordion">
      <div class="card-body">
         <p>`+ x.data().ForwardPower +`</p>
      </div>
   </div>
</div>
`);

      n += 1;
   });
});
</script>


db.collection（'Nairobi'）.get（）。然后（（s）=>{
$（“#站”）.html（“”；//这将清空您的站按钮
$（“#station_box”）.html（“”；//这将清空您的station box
var n=0；
s、 forEach（函数（x）{
$（“#手风琴”）。追加(`
`+x.id+`
`+x.data（）.ForwardPower+`
`);
n+=1；
});
});

嘿！请删除您的谷歌凭证。在公共论坛上共享任何凭证都不是一个好的做法。好吧，我已经删除了嘿！请删除您的谷歌凭证。在公共论坛中共享任何凭证都不是一个好的做法。好的，我已经移除了Nice，我已经尝试过了，它会显示文档和字段。然而，它刚刚被列出来，并没有按顺序排列。单击任何按钮，所有字段都将消失，而不是仅删除一个

show

类名。也许它一下子就显示出来了。我没有试过代码。但如果不是，那就是手风琴的密码。你可以试试。还是一样，按钮都在同一行。让我用显示内容的图片更新问题。您是否尝试将整个

卡

放入

forEach

？很好，我已经尝试过了，它显示了文档和字段。然而，它刚刚被列出来，并没有按顺序排列。单击任何按钮，所有字段都将消失，而不是仅删除一个

show

卡

放入

forEach

？