How to order FireStore collection in angular Typescript

Question

I am using Firestore in angular, I would like to show a collection ordered by an attribute pos, I have no issue with importing the collection but I have no idea how to order it.

I tried to follow some tutorial which uses the function orderBy('pos') but the console return me :

ERROR TypeError: this.competence.orderBy is not a function
    at FirebaseService.fireBaseRequest (main.js:401)
    at FirebaseService.getCompetence (main.js:405)
    at HomePageComponent.getComp (main.js:298)
    at HomePageComponent.ngOnInit (main.js:305)
    at checkAndUpdateDirectiveInline (vendor.js:87496)
    at checkAndUpdateNodeInline (vendor.js:98156)
    at checkAndUpdateNode (vendor.js:98095)
    at prodCheckAndUpdateNode (vendor.js:98949)
    at Object.eval [as updateDirectives] (ng:///AppModule/Home…ost.ngfactory.js:10)
    at Object.updateDirectives (vendor.js:98569)
defaultErrorLogger  @   vendor.js:70180

My firebase.service :


import {Injectable} from '@angular/core';
import {HttpClient, HttpErrorResponse} from '@angular/common/http';
import {AngularFirestore} from '@angular/fire/firestore';


@Injectable({
  providedIn: 'root'
})

export class FirebaseService {


  competence;

  constructor(private firestore: AngularFirestore) {
  }

  fireBaseRequest(path) {
    this.competence = this.firestore.collection(path);
    this.competence = this.competence.orderBy('pos').get();
    return this.firestore.collection(path).snapshotChanges();


  getFormation() {
    return this.fireBaseRequest('formations');
  }
  }

}

My component Html :

      <!--      Formation-->
      <mat-card *ngFor="let formation of filterBy('pos') " class="mb-3">
        <mat-card-title>
          {{formation.payload.doc.data().titre}}
        </mat-card-title>
        <mat-card-subtitle>
          {{formation.payload.doc.data().lieu}}
          <p>{{formation.payload.doc.data().date}}</p>
        </mat-card-subtitle>
        <mat-card-content>
          {{formation.payload.doc.data().description}}
        </mat-card-content>


      </mat-card>

My component ts :

import {Component, OnInit} from '@angular/core';
import {FirebaseService} from '../services/firebase.service';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {
  competence;
  formations;


  getComp = () =>
    this.firebaseService
      .getCompetence()
      .subscribe(res => (this.competence = res));

  getFormation = () =>
    this.firebaseService
      .getFormation()
      .subscribe(res => (this.formations = res));


  constructor(private firebaseService: FirebaseService) {
  }

  ngOnInit() {
    this.competence = this.getComp();
    this.formations = this.getFormation();
    if (window.innerWidth < 768) {
      this.cols = '4';
      this.rowHeight = '4:5';
    }

  }

Adrita Sharma · Accepted Answer · 2019-07-17 08:16:36Z

2

Try like this:

My firebase.service :

this.competence = this.firestore.collection(path, ref => ref.orderBy('pos'));

or sort in component.

My component ts :

 getComp = () =>
    this.firebaseService
      .getCompetence()
      .subscribe(res => (this.competence = this.sortArrayByKey(res,'pos'));

and add sortArrayByKey function:

sortArrayByKey(Array:any[], Key:string) {
    return Array.sort(function (a, b) {
      return a[Key] - b[Key];
    });
}

edited Jul 17, 2019 at 8:16

answered Jul 17, 2019 at 7:58

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Nassim El gazzah Over a year ago

i just tried it and its return me : ERROR TypeError: this.competence.sortArrayByKey is not a function [...]

Adrita Sharma Over a year ago

sortArrayByKey is a seperate function. Try adding in after constructor function or at the end

Nassim El gazzah Over a year ago

Yes i know its exactly what i did, regardless of the function used after the competence variable, the console returns to me that it is not defined

Adrita Sharma Over a year ago

Modified the answer, please check

Nassim El gazzah Over a year ago

I edited your first solution (service) its now working! I just had to return directly the formation variable. Thanks :)

|

Collectives™ on Stack Overflow

How to order FireStore collection in angular Typescript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related