firebasefirebase-realtime-databasepolymerpolymer-2.xpolymerfire

Polymer 2.x + Firebase: How to reverse order of iron-list?


I want to display my data in reverse chronological order of how/when it was entered. In other words, I want the most recent entries to appear at the top.

I am using Polymerfire <firebase-query> to fetch data from my Firebase/Polymer app and I am using <iron-list> to display the data. Currently, the list has the most recent entries at the bottom of the list.

I expect that reversing the order in either <firebase-query> or <iron-list> should result in the desired behavior. I prefer to accomplish this without using the items.reverse() method. Are there any properties or methods native toiron-list or Polymerfire to accomplish the desired behavior?

<firebase-query
    id="query"
    app-name="notes"
    path="/notes/[[uid]]"
    data="{{items}}">
</firebase-query>

<iron-list items="[[items]]">
  <template>
    <div>
      [[item.name]]
    </div>
  </template>
</iron-list>

<script>
Polymer({
  properties: {
    uid: String,
    items: {
      type: Object,
      observer: 'itemsChanged'
    }
  },

  itemsChanged: function (newItems, oldItems) {
    // do something when the query returns values
  }
});
</script>

Solution

  • As far as I know (and could quickly check in the PolymerFire source code for its query component) there is nothing built into the library for reversing the items from the database.

    The remaining option is to add an additional property to your database nodes with the inverted value of the property you want to sort on. So in your case that could be an inverted timestamp: -1 * Date.now(). If you then sort on this inverted value, the results will show up in descending order of the original timestamp.