我一直在尝试开发一个网络博客应用程序，人们可以来这里上传不同的博客，也可以阅读其他人上传的博客。我能够成功地将数据上传到 firebase 实时数据库，但是我在尝试从 firebase 检索数据时遇到了问题。我有一张来自谷歌 Material 库的卡片，我希望标题和描述显示在下面。但是每当我尝试检索数据时，只会显示来自最后一个节点的数据。下面是我的 html 和 javascript 代码。
HTML代码:
<div class="w">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text" id="titlePost">Welcome</h2>
</div>
<div class="mdl-card__supporting-text" id="descPost">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="post.html">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
Javascript 代码:
var rootRef = firebase.database().ref().child("posts");
rootRef.on("child_added",snap =>{
var title = snap.child("Title").val();
var desc = snap.child("desc").val();
$("#titlePost").text(title);
$("#descPost").text(desc);
});
下面是我的数据库的图片。
这是我检索到的数据的样子 enter image description here 只检索到一个节点
最佳答案
将您的帖子放在列表中，这样新的 child 就不会取代您的旧 child ，如果它在列表中，它只会扩展列表。在这种情况下，您的 parent 是 “ul”，称为“博客帖子”，您将像下面的示例一样将子项附加到此列表。您的 child 将扩展此列表并且不会相互覆盖
<body>
<div>
<ul class="blog-posts">
<li>
<!--Your Posts are here-->
<div class="mdl-card__title">
<h2 class="mdl-card__title-text" id="titlePost">Welcome</h2>
</div>
<div class="mdl-card__supporting-text" id="descPost">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
</ul>
</div>
parent.append(`
<li>
<div class="w">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text" id="${key}">${title}</h2>
</div>
<div class="mdl-card__supporting-text" id="descPost">
${desc}
</div>
</div>
<li/>`
);
关于javascript - 无法将数据从 firebase 实时数据库检索到网络应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52701313/