Get Data from Firebase In descending Order

Question

i need to get data from Firebase in descending order .

When the component loads for the first time it happens fine.

  fetchData(){
    return this.af.list('/path/path/',{
      query: {
        orderByChild: 'createdAt'
      }
    }).map(arr => {return arr.reverse();});
  }

The data from fetch ads is stored in a var and then displayed.

But now the problem is the var is modified at run time the user can update the var array , or delete or add to it .

And when ever any of these operations takes place the data is modified on the firebase db and that calls the fetch data again .

But then the reverse is again revesed rendering the whole thing use less.

By this i mean is after the first component load the var is 1,2,3,4. But then when we add to var instead of becoming 1,2,3,4,5 it becomes 5,4,3,2,1.

This is very confusing but i a tried lot but not able to fix this.

UPDATE

 ngOnInit() {

    this.display = this.route.snapshot.data['Auth'];

    if(this.display){
      this.showProgress = true;
      this.user = JSON.parse(localStorage.getItem("user"));
      this.service.fetchData().subscribe((data) => {
        this.comments = data;
        this.showProgress = false;
      });
    } else {
      this.afAuth.authState.subscribe((data) => {
        if (data) {
          localStorage.setItem("user", JSON.stringify(data));
          this.user = data;
          this.service.fetchData().subscribe((res) => {
            this.comments = res;
            this.showProgress = false;
          });
        } else {
          this.comments = null;
        }
      });

This is what happens on run time rest all are the crud functions of angular2firebase that happens when we add update or delete

I tried using pipes for the same but then it causes problem when getting the index so i dropped the plan as it was getting too complex

add(){
    this.service.postComment(this.comment, this.user);
  }

  editComment(key:string,updatedComment:any){
    const index = ((this.page-1)*5)+i;
    const updated = this.comments[index];
    updated.comment  = comment;
    this.service.editComment(updated.$key,updated);
  }

  deleteComment(key:String){
   this.service.deleteComment(this.comments[index].$key);
  }

Answer 1

I believe you have a typo here:

  editComment(key:string,updatedComment:any){
    this.service.editComment(updatedComment.$key, updatedComment); // I changed `updated` to `updatedComment`
  }

Another thing you could do, is following on your reverse custom pipe approach, and when you do that, remove reverse() from your map() in fetchData().

Reverse Pipe:

import {Pipe} from 'angular2/core';

@Pipe({
  name: 'reverse',
  pure: false
})
export class ReversePipe {
  transform (values) {
    if (values) {
      return values.reverse();
    }
  }
}

UPDATE:

Try declaring the mapped and reversed response as a FirebaseListObservable<any[]>.

 fetchData(){
    return this.af.list('/path/path/',{
      query: {
        orderByChild: 'createdAt'
      }
    }).map((array) => array.reverse()) as FirebaseListObservable<any[]>;
  }

Answer 2

Does this sort of overview help?

app-module.ts

import {firebaseConfig} from "../firebase.config";
@ngModule({
 imports: [
  AngularFireModule.initializeApp(firebaseConfig)

  ]

})

firebase.config.ts

export const firebaseConfig = {
    apiKey: "<your api key>",
    authDomain: "....",
    databaseURL: "....",
    storageBucket: "...",
    messagingSenderId: "..."
};

my-component.ts

import {Component, OnInit} rrom '@angular/core';
import {AngularFireDatabase} from 'angularfire2';
import {Data} from "../shared/model/data"; //insert your domain class here & in code

export class MyComponent implements OnInit {
   data: Data[];
   constructor(private db: AngularFireDatabase) {}

    ngOnInit() {
        this.db.list('data', {
            query: {
                orderByKey: true,
                limitToLast: 10
            }
        })
            .do(console.log)
            .subscribe(
                data => this.data = data
            );
    }
}

my-component.html

<table *ngIf="data">
  <tr *ngFor="let row of data">
      <td>{{row.column}}</td>
   </tr>
</table>
<div *ngIf="! data">Loading ...</div>

Here are the links for other users coming to this thread for the first time:

• AngularFire2 setup notes
• Firebase console

Update

I believe from out dialog in the comments for your original question, the problem lies in the fact that

this.display = this.route.snapshot.data['Auth'];

is an asynchronous process, and consequently you get subscriptions to both halves of the if else branch.

Your need a RouterDataResolver and move the if/else block into it.
See my question here, that will give you a roadmap for how to proceed.