无法将数据从Firebase实时数据库检索到Web应用程序

Question

I have been trying to develop a web blog app, where people can come and upload different blogs and can read blogs uploaded by others too. 我一直在尝试开发一个Web博客应用程序，人们可以在该应用程序中上传不同的博客，也可以阅读其他人上传的博客。 I was able to successfully upload the data on the firebase real-time database, but I am facing an issue while trying to retrieve data from firebase. 我能够成功将数据上传到Firebase实时数据库中，但是在尝试从Firebase检索数据时遇到了问题。 I have a card from google material library and I want the title and desc to be displayed there below. 我有一张来自Google材料库的卡片，我希望标题和说明显示在下面。 But whenever I am trying to retrieve the data only data from the last node is getting displayed. 但是，每当我尝试检索数据时，仅显示来自最后一个节点的数据。 Below is my code for html and javascript. 下面是我的html和javascript代码。

HTML code: 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 code: 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);
});

Below is the pic of my database. 下面是我的数据库的图片。

在此处输入图片说明

and here's what my retrieved data looks like enter image description here Only one node is retrieved 这就是我检索到的数据的样子在这里输入图像描述仅检索到一个节点

Answer 1

Only one node is retrieved 仅检索到一个节点

That seems unlikely. 这似乎不太可能。 You can easily check this, by adding some simple logging and then checking the developer console of your browser: 您可以通过添加一些简单的日志记录然后检查浏览器的开发者控制台来轻松地检查此情况：

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);
});

My expectation is that you'll see each title being logged. 我的期望是您将看到每个标题都被记录下来。 But since you always call $("#titlePost").text(title); 但是由于您总是调用$("#titlePost").text(title); , you only see the title of the last post in the HTML. ，您只会在HTML中看到最后一篇文章的标题。

A simple fix is to just append the titles in the HTML: 一个简单的解决方法是仅将标题添加到HTML中：

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

Now with this, you'll see all titles concatenated together. 现在，您将看到所有标题串联在一起。 That's the correct content, but it probably looks horrible. 那是正确的内容，但看起来可能很可怕。

So the proper solution is to generate a bit of HTML around each title and description. 因此，正确的解决方案是在每个标题和描述周围生成一些HTML。 As far as I can see, this is what you use: 据我所知，这是您使用的：

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

Answer 2

Put your posts in a list so that a new child won't replace your old child, if it is in a list it will just extend the list. 将您的帖子放在列表中，这样一个新的孩子就不会替换您的旧孩子，如果它在列表中，只会扩展该列表。 Your parent in this case is the "ul" which is callled "blog-posts", and you are going to append childs to this list like in the example below. 在这种情况下，您的父母是被称为“ blog-posts”的“ ul”，您将像下面的示例一样将孩子添加到此列表中。 Your children will expand this list and not overwrite each other 您的孩子将展开此列表，并且不会互相覆盖

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

无法将数据从Firebase实时数据库检索到Web应用程序

问题描述

2 个解决方案

解决方案1
0 2018-10-08 13:50:23

解决方案2
0 已采纳 2018-10-08 13:55:01

无法将数据从Firebase实时数据库检索到Web应用程序

问题描述

2 个解决方案

解决方案1 0 2018-10-08 13:50:23

解决方案2 0 已采纳 2018-10-08 13:55:01

解决方案1
0 2018-10-08 13:50:23

解决方案2
0 已采纳 2018-10-08 13:55:01