How to retrieve all the document(contain image url & name) from cloud firestore database to website?
Question
I am trying to retrieve user Image and name from cloud firestore database to website. The image and name retrieval work good and the user image and name is appearing on the website screen. But the problem is that it is only fetching only Singal document which contain user Image and name. I have more document uploaded in the cloud firestore database which also contain different user Image and name. Pls see the Picture linked below.
Q1: How to fetch all the document which contain user Image and name
Q2: Why it is fetching only singal document?
Js code:
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 code:
<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>
1 answers
solution1
1 2020-05-30 14:22:51
You're reading and processing all documents from the collection. The only problem is that you're constantly setting the inner HTML of list_div instead of adding to it.
So the solution is to append the new element to the existing contents of 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>"
});
});
Aside from some formatting the big change is the addition of a + in list_div.innerHTML +=... , and (as a consequence) clearing the inner HTML before the loop.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.