0

I'm trying to display the latest ads, I have some ads saved into Firebase and want to display the lasts added, they are stored with a timestamp property.

If I create the ng-repeat without limitTo, it works as expected, but when I use limitTo or even limitToFirst, it doesn't work as expected, it displays correctly the number of items I was going to display at the beginning but it skips some of them, and when I click the loadmore button, it loads more ads and display the ones that supposed to be there from the beginning.

Note that it should display two ads with dates 27th oct but it only displays one.

Here a plunkr with a demo: https://plnkr.co/edit/Ae8rlbD8Uob5TrAHrivz?p=preview

app.controller('publicCtrl', function($scope, $firebaseArray) {
  $scope.loadmore = 6;
  $scope.latest = "-Addate";
  var listads = new Firebase("https://milocal.firebaseio.com/Users/Ovalle");
  $scope.listads = $firebaseArray(listads);

  $scope.loadmoreads = function(){
    //console.log("Cargando anuncios");
    $scope.loadmore += 2;
    $scope.listads = $firebaseArray(listads);
    console.log($scope.loadmore);
  }

});

in the HTML:

ng-repeat="ads in filteredAds = (listads | limitTo: loadmore | orderBy: latest)"

Hope someone can explain me what I'm doing wrong.

Thanks.

Daniel Soublett
  • 849
  • 2
  • 8
  • 23
  • You're definitely not filtering anything in your query from Firebase. `$firebaseArray(Firebase("https://milocal.firebaseio.com/Users/Ovalle"))` will load all children from that location. Can you point to the documentation where those `limitTo` and `orderBy` are defined? That way I can hopefully understand how this is supposed to work. – Frank van Puffelen Jan 24 '16 at 05:14
  • You start by limiting the array, effectively taking the first 6 elements of the not-ordered array, and then you order those 6 elements. You want the reverse: sort the array to have the most recent first, and only display the 6 first ones: `listads | orderBy: latest | limitTo: loadmore`. – JB Nizet Jan 24 '16 at 08:34
  • @FrankvanPuffelen thanks for helping. limitTo and orderBy are from the angularjs side I think, I used them to try to filter the data retrieved from that query. But from firebase side I also try var listads = new Firebase("https://milocal.firebaseio.com/Users/Ovalle"); $scope.listads = $firebaseArray(listads.orderByChild("-Addate").limitToFirst(6)); but it also does not work or maybe I'm missing something. – Daniel Soublett Jan 24 '16 at 15:44
  • @JBNizet That works perfect, now that I see I just had to change the order of those directives. I understood really well what you said, if I dont find a firebase side method to do the same Im gonna do it that way. Thanksso much – Daniel Soublett Jan 24 '16 at 17:01

1 Answers1

0

I changed your Plunkr to this:

var app = angular.module('plunker', ["firebase"]);

app.controller('publicCtrl', function($scope, $firebaseArray) {
  $scope.loadmore = 1;
  $scope.latest = "-Addate";
  var listads = new Firebase("https://milocal.firebaseio.com/Users/Ovalle");
  var query = listads.orderByChild("-Addate").limitToFirst($scope.loadmore);
  $scope.listads = $firebaseArray(query);

  $scope.loadmoreads = function(){
    $scope.loadmore += 2;
    var query = listads.orderByChild("-Addate").limitToFirst($scope.loadmore);
    $scope.listads = $firebaseArray(query);
  }

});

It initially loads 2 items. Then when you click the "Load more" button, it loads 4. Then 6, etc.

Updated/forked plunkr: https://plnkr.co/edit/MUMerL?p=preview

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • The only problem is that is not ordering correctly, because I want to show the last ads added that's why I have **orderByChild("-Addate")** instead of just **Added** for inverse order – Daniel Soublett Jan 24 '16 at 16:56
  • Searching and searching I found this post where explains exactly what I need [link](http://stackoverflow.com/questions/31282204/firebasearray-descending-order) and I was trying to store a negative timestamp but couldnt do it. If I manually store it in Firebase then I can see the order as I want, but the thing is that I dont know how to store them by code, any sample? – Daniel Soublett Jan 25 '16 at 15:55