0

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>
Let Me Tink About It
  • 15,156
  • 21
  • 98
  • 207

1 Answers1

1

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.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • Would it be better to use `.reverse()` or would the unintended consequences of how `.reverse()` interacts with the query (i.e., batching of `firebase-query` and `iron-list`) mean your suggested approach is, in fact, the best approach? – Let Me Tink About It Jun 14 '18 at 04:48
  • 1
    I couldn't find a `reverse` method in PolymerFire or iron-list, so have no idea how they interact. But storing the inverted value is a common pattern with Firebase, that known to work. – Frank van Puffelen Jun 14 '18 at 13:43
  • Didn't OP mean `reverse()` on the original array? – Thomas Orlita May 17 '19 at 15:13