Я пытался разработать приложение для веб-блогов, куда люди могут приходить и загружать разные блоги, а также читать блоги, загруженные другими. Мне удалось успешно загрузить данные в базу данных firebase в реальном времени, но я столкнулся с проблемой при попытке получить данные из firebase. У меня есть карточка из библиотеки материалов Google, и я хочу, чтобы название и описание отображались ниже. Но всякий раз, когда я пытаюсь получить данные, отображаются только данные с последнего узла. Ниже мой код для 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

И вот как выглядят мои полученные данные введите здесь описание изображения Получен только один узел

0
Dodge 8 Окт 2018 в 14:31

2 ответа

Лучший ответ

Поместите свои сообщения в список, чтобы новый ребенок не заменил вашего старого ребенка, если он есть в списке, он просто расширит список. В этом случае вашим родителем является 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/>`
);
0
Biede 8 Окт 2018 в 17:03

Получен только один узел

Это кажется маловероятным. Вы можете легко это проверить, добавив простое ведение журнала, а затем проверив консоль разработчика своего браузера:

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>`
    );
});
0
Frank van Puffelen 8 Окт 2018 в 13:50