CODEWITHSUNDEEP
sortingember.jsfirebaseember-dataemberfire
Molik Miah
Molik Miah

Reputation: 132

emberjs - sorting data retrieved from Firebase

I've spent the last three days trying to figure this out and i hope someone from here could help.

Note regarding setup: I'm working off Ember-Cli therefore my Ember version 1.13.7 and Ember-Data 1.13.8

To learn more about how emberJS works i decided to create a simple blog system that i will use on my own website. The data is loaded from a Firebase database using the Emberfire plugin.

Help: I cannot sort the data i retrieve into a descending order. For example, if i have 5 posts created on Monday, Tues, Wednesday, Thursday and Friday. Each with a unique timestamp in numerical order.

When i retrieve data it shows in this order:

1st ever post (oldest)
2nd ever post
3rd ever post
4th ever post
5th ever post (newest)

i want to reverse the order so my latest blog post appears on top.

I am retrieving data with the following code:

return this.store.find('post');

I can't work out how to use: sortBy which is from Ember itself or the orderBy() which is from firebase/emberfire?

I understand it needs to be inside a controller which will modify the data from the model before presenting it in the view. But can anyone help?

heres some more code:

Attempt at a controller - it doesn't work:

import Ember from 'ember';

 export default Ember.ArrayController.extend({
    sortedModel : function(){
        return this.get('model').sortBy();
    }.property('@each')
});

View Template:

{{#each sortedModel as |post|}}
    {{#blog-post post=post}}{{/blog-post}}
{{/each}}

{{outlet}}

Upvotes: 0

Views: 657

Answers (2)

NicholasJohn16
NicholasJohn16

Reputation: 2409

You need a property to order your posts by. Luckily, Firebase automatically provides such a property. Every item saved to Firebase is automatically given a timestamp at that moment.

In your post model, add a timestamp property like this:

//models/post

export default DS.Model.extend({
  //
  timestamp: DS.attr('number')
  //
});

Now in your controller you can sort by it. You don't need the @each helper because sortBy already works on arrays.

//controllers/posts

import Ember from 'ember';

 export default Ember.ArrayController.extend({
    sortedModel : function(){
        return this.get('model').sortBy('timestamps').reverse();
    }
});

I think that should work, but let me know in the comments if you have any trouble!

Upvotes: 3

kristjan reinhold
kristjan reinhold

Reputation: 2048

Since you said your post array is already ordered but the wrong way. You could use Array.prototype.reverse();

export default Ember.ArrayController.extend // Array and object c are deprecated.

export default Ember.Controller.extend({
    sortedModel : function() {
        return this.get('model').reverse(); 
    }).property('model')

NB: If this does not work for you (your problem is bigger, but not explained here). I think you should handle the pagination logics in backend.

Instead of this.store.find('post'); you should be using

this.store.find('post', { page: variable });

Upvotes: 1

Related Questions