无法将 Firebase 实时数据库中的数据检索到 Web 应用程序中答案

【问题标题】：Unable to retrieve data from firebase realtime database into web app无法将 Firebase 实时数据库中的数据检索到 Web 应用程序中
【发布时间】：2018-10-08 11:31:00
【问题描述】：

我一直在尝试开发一个网络博客应用程序，人们可以在这里上传不同的博客，也可以阅读其他人上传的博客。我能够成功地将数据上传到 firebase 实时数据库，但是在尝试从 firebase 检索数据时遇到了问题。我有一张来自谷歌资料库的卡片，我希望在下面显示标题和说明。但是每当我试图检索数据时，只会显示来自最后一个节点的数据。下面是我的 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 只检索到一个节点

【问题讨论】：

here's what my retrieved data looks like 不，那是图片，不是数据
您期待什么？每个child_added 替换title 和desc
那你建议我做什么

标签： javascript java html css firebase-realtime-database

【解决方案1】：

将您的帖子放在一个列表中，这样新孩子就不会取代您的老孩子，如果它在列表中，它只会扩展列表。在这种情况下，您的父母是 “ul”被称为“blog-posts”，你将像下面的例子一样将孩子附加到这个列表中。您的孩子将扩展此列表，而不会相互覆盖

<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/>`
);

【讨论】：

请解释如何做到这一点以提供一个好的答案。您可以使用示例代码来做到这一点
感谢您尝试帮助我，但我真的不知道如何实现它，所以我们将不胜感激。
非常感谢，经过一些修改，它确实对我有用。

【解决方案2】：

只检索一个节点

这似乎不太可能。您可以通过添加一些简单的日志记录然后检查浏览器的开发者控制台来轻松检查这一点：

rootRef.on("child_added",snap =>{
    var title = snap.child("Title").val();
    var desc = snap.child("desc").val();
    console.log(title);

    $("#titlePost").text(title);
    $("#descPost").text(desc);
});

我的期望是您会看到每个标题都被记录下来。但是由于您总是调用$("#titlePost").text(title);，因此您只能在 HTML 中看到最后一篇文章的标题。

一个简单的解决方法是在 HTML 中附加标题：

$("#titlePost").append(title);

现在，您将看到所有标题连接在一起。这是正确的内容，但它可能看起来很糟糕。

因此，正确的解决方案是围绕每个标题和描述生成一些 HTML。据我所知，这是您使用的：

rootRef.on("child_added",snap =>{
    var key = snap.key;
    var title = snap.child("Title").val();
    var desc = snap.child("desc").val();

    var parent = $("#titlePost").parent().parent().parent();
    parent.append(`<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>`
    );
});

【讨论】：

先生，正在检索每个数据，我已经为检索到的标题创建了警报，并且显示了所有标题，但只显示最后一个。
$("#titlePost").parent().parent().parent();只是为了确定先生会代替父母（对不起，HTML中的新东西）
请尝试我的每一个 sn-ps，因为它们会建立一个更好的解决方案。通常，您需要学习生成包含数据库内容的 HTML。我的第三个 sn-p 是一个简单的版本，但你最好进一步研究这种方法。
$("#titlePost").parent().parent().parent() 只是在 HTML 中查找元素以添加新内容。如果您知道该元素的 ID，也可以使用 $("#idOfParent") 查找它。
附加数据是个好主意，但我必须像@sertsedat 所说的那样先把它放在列表中，但还是谢谢你。