如何将 Firestore 文档中的所有数据显示到 html 元素中答案

【问题标题】：How can I display all data from Firestore documents into html elements如何将 Firestore 文档中的所有数据显示到 html 元素中
【发布时间】：2019-11-14 11:16:00
【问题描述】：

我正在设计一个网页，该网页将从我的 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>

我的 Firestore 集合的结构如下：

我们的想法是获取文档的名称并将其显示为 id="station" 按钮的名称，然后获取 Forwardpower 并将其显示。

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

网页图片更新

【问题讨论】：

嘿！请删除您的 Google 凭据。在公共论坛上共享任何凭证不是一个好习惯。
好的，我已经删除了

标签： javascript html firebase google-cloud-firestore

【解决方案1】：

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

您似乎正在尝试列出它。示例如下：

<!-- 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>

【讨论】：

很好，我已经尝试过了，它会显示文档和字段。然而，它只是被列出来的，并且没有按顺序排列。单击任何按钮时，所有字段都会消失，而不仅仅是一个
尝试删除show 类名。也许它一下子就显示出来了。
我没有尝试代码。但如果不是，那么它只是手风琴代码。你可以试试。
还是一样，按钮都在同一行。让我用显示的图片更新问题
您是否尝试将整个card 放入forEach 中？