Firebase - LimitToLast - 显示结果

Question

我正在使用Firebase作为数据库进行类的项目。该项目包括一个从数据库中提取信息的页面，以显示您观看的最后4部电影的电影海报。

使用我当前的代码，我可以获得控制台日志以显示分配给每个移动的最后4个网址，但只有最新的网址显示在我网站上的所有四个海报位置。

目标是在每个ID位置显示最后4部电影的每张海报。我附上图片以帮助想象我的意思。

如果有人能指出如何解决这个问题我会非常感激。

var lastFourRef = firebase.database().ref("events");
lastFourRef.orderByChild("events").limitToLast(4).on("child_added", 
function(snapshot) {
  var lastMovie = snapshot.val().movie;
  var lastHost = snapshot.val().host;
  var lastDate = snapshot.val().date;
  var lastPoster = snapshot.val().poster;

  document.getElementById('img-num1').src = lastPoster;
  document.getElementById('img-num2').src = lastPoster;
  document.getElementById('img-num3').src = lastPoster;
  document.getElementById('img-num4').src = lastPoster;

  console.log(lastMovie);
  console.log(lastHost);
  console.log(lastDate);
  console.log(lastPoster);
});

Answer 1

使用child_added时，每次向该节点添加事件时都会调用该函数，snapshot对象包含该节点的数据。

您可以使用counter变量在其img元素中显示每个图片：

var lastFourRef = firebase.database().ref("events");
var counter = 1;
lastFourRef.orderByChild("events").limitToLast(4).on("child_added", 
function(snapshot) {
  var lastMovie = snapshot.val().movie;
  var lastHost = snapshot.val().host;
  var lastDate = snapshot.val().date;
  var lastPoster = snapshot.val().poster;

  document.getElementById('img-num'+counter).src = lastPoster;

  console.log(lastMovie);
  console.log(lastHost);
  console.log(lastDate);
  console.log(lastPoster);
  counter++;
});