时间戳

首页 > 解决方案 > 如何从 Firebase 检索多条数据并将其附加到不同的

做同样的事情？

javascript - 如何从 Firebase 检索多条数据并将其附加到不同的
做同样的事情？

问题描述

所以我正在制作一个页面来显示从表单输入的数据，以使用 Firebase 附加到另一个页面。我基本上已经设置好了，所以有一个表单可以使用函数保存消息并将其查询到 Firebase，然后我在另一个页面上使用它进行显示。到目前为止，我已经制作了 1 张卡片，效果很好，但是每当我在表单上再次添加数据时，它就会并排粘在一起，然后制作一个新的卡片容器。以下是一些图片：

在此处输入图像描述

当我再次填写表格时，结果是这样的： 在此处输入图像描述

如您所见，它从“Random UHC”（这是 Firebase 中的第一个事件）变为“Random UHCRandom Event”。我一直在尝试对其进行设置，以便单独制作一个全新的卡片容器，而不仅仅是使用同一张卡片。这里还有一些代码：在 Firebase 中查询数据的表单

var messagesRef = firebase.database().ref().child('messages');

// Listen for form submit
document.getElementById('contactForm').addEventListener('submit', submitForm);

// Submit form
function submitForm(e){
  e.preventDefault();

  // Get values
  var name = getInputVal('name');
  var company = getInputVal('eventTitle');
  var email = getInputVal('date');
  var phone = getInputVal('time');
  var message = getInputVal('message');

  // Save message
  saveMessage(name, company, email, phone, message);

  // Show alert
  document.querySelector('.alert').style.display = 'block';

  // Hide alert after 3 seconds
  setTimeout(function(){
    document.querySelector('.alert').style.display = 'none';
  },3000);

  // Clear form
  document.getElementById('contactForm').reset();
}

// Function to get get form values
function getInputVal(id){
  return document.getElementById(id).value;
}

// Save message to firebase
function saveMessage(name, eventTitle, date, time, message){
  var newMessageRef = messagesRef.push();
  newMessageRef.set({
    name: name,
    eventTitle:eventTitle,
    date:date,
    time:time,
    message:message
  });
}

我如何在新页面上输出它：


rootRef.on("child_added", snap => {
    
    var name = snap.child("name").val();
    var eventTitle = snap.child("eventTitle").val();
    
    $("#eventTitle").append(eventTitle);

});

显示数据的页面的 HTML：

    <div class="card-main">
      <div class="card-head">
        <img src="logo.png" alt="logo" class="card-logo">
        <div class="product-detail">
          <h2>Upcoming Events</h2> 
        </div>
      </div>
      <div class="card-body-1">
        <div class="product-desc">
          <span class="product-title">
                <b><p id = eventTitle style="width:18%; float: left;"></p></b>
                  <span class="badge">
                    New
                  </span>
                  <span class="product-caption">
                    <b>July 5th, 2020 - 
                    5:30 PM EST</b>
                  </span>
          </span>

id 元素 eventTitle 是当前页面上唯一显示的内容。您的帮助将不胜感激。

标签： javascripthtmlfirebasefirebase-realtime-database

解决方案

请注意：此答案来自Net Ninjas Firebase 教程的第 9 集，为了使其更快，我认为您正在寻找的细节从 8 分钟到 10 分钟之间开始。我绝对会推荐你去看他的视频，因为他把一切都说得很清楚并且解释得很好。那将是我最好的答案，但我试图在下面解释如何做到这一点的最基本形式。

作为一般经验法则，您需要确保让您的客户端 javascript 为数据库中的每个“条目”或卡片创建一个新元素。您可以通过实现这样的操作来完成此操作，该操作为数据库中的每个文档或文档填充一张新卡片。

data.forEach(doc => {

})

然后对于每个文档，在您的 Javascript 中，为 HTML 编写模板，然后使用 firebase 数据或变量传递。下面的例子。

data.forEach(doc => {
    // This is simply fetching your doc data and passing that into a constant
    const card = doc.data(); 
    const div = '
        // Put Your HTML used for making the template of the card in here
        // Pass in data to be populated on your card like in the example displayed below   
        <b><p style="width:18%; float: left;">${card.EventTitle}</p></b>
    ';
    html += div
});
eventCards.innerHTML = html;

该系统应该能够实现您正在寻找的东西。我可能没有最好地解释它，但如果某些东西不起作用或者您还有其他问题，您可以参考前面提到的视频或评论。如果有人有办法改善这个答案，请告诉我！

推荐阅读