[英]how to retrieve imageUrl and Text data from cloud firestore database?
在这里,我试图将(imageUrl 和 Fname)数据从 Cloud Firestore 数据库检索到 web。 数据从 Cloud Firestore 数据库中检索并显示在 Google chrome 控制台中。但它没有显示在网站上。
//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>
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.