Firebase - LimitToLast - 显示结果

Question

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

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

目标是在每个 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++;
});