如何以相反的顺序输出firebase快照？

Question

我正在尝试从数据库中获取最新的 3 个数据并在 HTML 页面中以相反的顺序显示它们。

代码：

var refForevent = database.ref('/events/post');

refForevent.orderByChild("intro").limitToLast(3).on('child_added', function(snapshot){
    
    var eventlist = []

    eventlist.push(snapshot)
    console.log(eventlist)

    eventlist.reverse()
            
    document.getElementById("event1date").innerHTML = moment(eventlist[0].intro).format("MMM Do YYYY");
    document.getElementById("event1title").innerHTML = eventlist[0].title;

    document.getElementById("event2date").innerHTML = moment(eventlist[1].intro).format("MMM Do YYYY");
    document.getElementById("event2title").innerHTML = eventlist[1].title;

    document.getElementById("event3date").innerHTML = moment(eventlist[1].intro).format("MMM Do YYYY");
    document.getElementById("event3title").innerHTML = eventlist[1].title;
    
})

输出：Output that I am getting

数据库：

Answer 1

我看到intro 字段包含一个日期。

这是一种解决方案：

1. 取这个字段的值
2. 删除连字符分隔符（例如，从 2020 年 12 月 10 日起，您会得到数字 20201210）
3. 将此数字乘以 -1
4. 将结果值存储在另一个字段中
5. 按此字段排序

或者（更优雅...），使用日期创建时间戳，将其乘以 -1 并按照上述说明使用它，即将结果值存储在另一个字段中并在该字段上排序。

Answer 2

由于您正在侦听 child_added 事件，因此您的函数将按照 Firebase 返回它们的顺序使用与查询匹配的每个帖子节点调用。所以你的eventlist 一次只能包含一个节点。

要反转项目，您可以让 Firebase 以相反的顺序返回值，正如 Renaud 建议的那样（我还将在下面链接一些答案），或者您可以一次收听所有结果，然后反转客户端 -方面（因为您的代码似乎已经在尝试）。后者看起来像：

var refForevent = database.ref('/events/post');

refForevent.orderByChild("date").limitToLast(3).on('value', function(results){
    
    var eventlist = []
    results.forEach(function(snapshot) {
        eventlist.push(snapshot.val())
    });

    eventlist.reverse()
    console.log(eventlist);
            
    ...    
})

所以这个：

• 侦听value 事件，而不是child_added，以便一次性获取所有匹配的子节点。
• 如果 then 循环遍历结果，将它们添加到数组中，
• 它在每个子快照上调用.val()，以从中获取值。

有关降序排序的更多信息，另请参阅：

• Display posts in descending posted order（我能找到的最古老的用负值描述技巧）
• firebase -> date order reverse（还有更多链接）
• Sorting in descending order in Firebase database