如何以相反顺序输出Firebase快照? [英] How to output the firebase snapshot in reverse order?

问题描述

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

代码:

  var refForevent = database.ref('/events/post');refForevent.orderByChild("intro").limitToLast(3).on('child_added'，function(snapshot){var eventlist = []eventlist.push(快照)console.log(事件列表)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;}) 

输出:(我发现的最早的描述是负值的把戏)

firebase->日期顺序倒退(还有更多链接)

在Firebase数据库中按降序排序

I am trying to get the latest 3 data from the database and display them in reverse order in the HTML page.

Code:

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: Output that I am getting

Database:

解决方案

Since you're listening to the child_added event, your function gets called with each post node that matches the query in the order in which Firebase returns them. So your eventlist will only ever contain one node at a time.

To reverse the items, you can either get Firebase to return the values in reverse order, as Renaud suggest (I'll also link some answers below), or you can listen to all results in once go and then reversing client-side (as your code already seem to be trying). The latter would look something like:

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);
            
    ...    
})

So this:

• Listens to the value event, instead of child_added, so that it gets all matching child nodes in one go.
• If then loops over the results, adding them to the array,
• It calls .val() on each child snapshot, to get the value from it.

For more on descending sorting, also see:

• Display posts in descending posted order (the oldest I could find describing the trick with negative values)
• firebase -> date order reverse (with many more links from there)
• Sorting in descending order in Firebase database

这篇关于如何以相反顺序输出Firebase快照?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！