如何從雲 Firestore 數據庫中檢索 imageUrl 和 Text 數據？

Question

在這里，我試圖將（imageUrl 和 Fname）數據從 Cloud Firestore 數據庫檢索到 web。 數據從 Cloud Firestore 數據庫中檢索並顯示在 Google chrome 控制台中。但它沒有顯示在網站上。

請查看圖片鏈接：- https://photos.google.com/share/AF1QipNg1h9iBxsBAZ_jBCNxpCyUptFx6R7WBidmHz7f6h3UWuIEl7OpmTlNdjyxMvL3RQ?key=NEVdbj2ZWTtcF2fbwdlbwdlpWMDcF2f1bwwdlpWMDcF2f1dl

//defualt.js 代碼：

    db.collection("student entry").get().then(function(Snapshot) {
      Snapshot.forEach(function(doc) {
          // doc.data() is never undefined for query doc snapshots
          console.log(doc.id, " => ", doc.data());

          var posts_div=document.getElementById('posts');
     posts.innerHTML="";
     var data=doc.data();
     console.log(data);
    for(let[key,value] of Object.entries(data)){
   posts_div.innerHTML="<div class='col-sm-4 mt-2 mb-1'>"+
   "<div class='card'>"+
   "<img src='"+value.image+"' style='height:250px;'>"+
   "<div class='card-body'><p class='card-text'>"+value.name+"</p>"+
   "<button class='btn btn-danger' id='"+key+"' onclick='delete_post(this.id)'>Delete</button>"+
   "</div></div></div>"+posts_div.innerHTML;
 }
      });
  });

//HTML代碼

  <html>
    <head>
        <title>Blogs</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>

     <div class="container mt-2">

         <div class="row mt-4" id="posts">

         </div>

     </div>

<!-- The core Firebase JS SDK is always required and must be listed first...make sure you remove -app from below line -->
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase.js"></script>

<script>
    // Initialize Firebase
    var config = {
        apiKey: "/*************/",
        authDomain: "/******/",
       databaseURL: "/******/",
       projectId: "/********/",
       storageBucket: "/********/",
      messagingSenderId: "/******/",
      appId: "/*************/",
      measurementId: "/******/"
    };
    firebase.initializeApp(config);
    const db = firebase.firestore();
    db.settings({ timestampsInSnapshots: true }); 
</script>


        <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 src="defualt.js"></script>
    </body>
</html>

在此處輸入圖像描述

Answer 1

val()用於實時數據庫，但您使用的是 firestore，因此將其更改為以下內容：

   db.collection('student entry').get().then(function(snapshot){
    snapshot.forEach(function(doc) {
        console.log(doc.id, " => ", doc.data());
  var posts_div=document.getElementById('posts');
  posts.innerHTML="";
  //..
 });

在集合內部迭代並使用doc.data()檢索文檔中的數據

https://firebase.google.com/docs/firestore/query-data/get-data#get_all_documents_in_a_collection

如何從雲 Firestore 數據庫中檢索 imageUrl 和 Text 數據？

問題描述

1 個解決方案

解決方案1
2 2020-05-27 11:50:46

如何從雲 Firestore 數據庫中檢索 imageUrl 和 Text 數據？

問題描述

1 個解決方案

解決方案1 2 2020-05-27 11:50:46

解決方案1
2 2020-05-27 11:50:46