как получить данные imageUrl и Text из базы данных облачного хранилища? - PullRequest
Новая
       1

как получить данные imageUrl и Text из базы данных облачного хранилища?

1 голос
/ 27 мая 2020

Здесь я пытаюсь получить данные (imageUrl и Fname) из базы данных облачного хранилища в Интернет. Данные извлекаются из базы данных облачного хранилища и отображаются в консоли Google chrome. Но они не отображаются на веб-сайте.

, пожалуйста, см. Ссылку на изображение: - https://photos.google.com/share/AF1QipNg1h9iBxsBAZ_jBCNxpCyUptFx6R7WBidmHz7f6h3UWuIEl7OpmTlNdjyxMvL3RQ?key=NEVzdlpWMjF2eUFjeTdjbWhkODc3T1BWdll1b2ZB

// по умолчанию. 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>

enter image description here

1 Ответ

2 голосов
/ 27 мая 2020

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

...