Как получить весь документ (содержащий URL-адрес и имя изображения) из базы данных облачного хранилища на веб-сайт? - PullRequest
Новая
       1

Как получить весь документ (содержащий URL-адрес и имя изображения) из базы данных облачного хранилища на веб-сайт?

0 голосов
/ 30 мая 2020

Я пытаюсь получить изображение и имя пользователя из базы данных облачного хранилища на веб-сайт. Получение изображения и имени работает нормально, а изображение и имя пользователя отображаются на экране веб-сайта. Но проблема в том, что он получает только документ Singal, который содержит изображение и имя пользователя. У меня есть еще один документ, загруженный в базу данных облачного хранилища, который также содержит другое изображение и имя пользователя. Пожалуйста, см. Изображение, указанное ниже.

Q1: Как получить весь документ, содержащий изображение и имя пользователя

Q2: Почему он получает только один документ?

Js код: 

const list_div= document.querySelector('#list_div');
db.collection('student entry').get().then(function(querySnapshot){
querySnapshot.forEach(function(doc){
  list_div.innerHTML="<div class='col-sm-4 mt-2 mb-1'>"+
"<div class='card'>"+
"<img src='"+doc.data().image+"' style='height:250px;'>"+
"<div class='card-body'><p class='card-text'>"+doc.data().fname+"</p></div></div>"

});
});

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="main-list" id="list_div">
            <div class="list-item">

            </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);
    var 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 hereenter image description here

1 Ответ

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

Вы читаете и обрабатываете все документы из коллекции. Единственная проблема заключается в том, что вы постоянно устанавливаете внутренний HTML из list_div вместо , добавляя к нему .

Итак, решение - добавить новый элемент к существующему содержимому list_div: 

const list_div= document.querySelector('#list_div');
db.collection('student entry').get().then(function(querySnapshot){
  list_div.innerHTML = "";
  querySnapshot.forEach(function(doc){
    list_div.innerHTML += "<div class='col-sm-4 mt-2 mb-1'>"+
      "<div class='card'>"+
      "<img src='"+doc.data().image+"' style='height:250px;'>"+
      "<div class='card-body'><p class='card-text'>"+doc.data().fname+"</p></div></div>"
  });
});

Помимо некоторого форматирования, большим изменением является добавление + в list_div.innerHTML += ... и (как следствие) очистка внутреннего HTML перед l oop.

...