Firebase: put collection inside an array

Question

Someone already used ng-table on angular and could figure out how to use it with firebase collecction?

I'm trying to use ng-table (last example) to sort and filter my collection on Angular 10, so I tried to just change the constant in the code to my object and I it did not work. I think I need to convert my object to an array, so I tried this library to do it, and also dont work. Also tried to look for this on stackoverflow and all I find out is others with the same problem.

This is the exact function where I need to do this. COUNTRIES is the array that comes from * countries.ts . The function bellow is on country.service.ts .

  private _search(): Observable<SearchResult> {
    const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;

    // 1. sort
    let countries = sort(COUNTRIES, sortColumn, sortDirection);

    // 2. filter
    countries = countries.filter(country => matches(country, searchTerm, this.pipe));
    const total = countries.length;

    // 3. paginate
    countries = countries.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
    return of({countries, total});
  }
}

That is what I tried with the lib that found out:

this.items = this.firestore.collection('users').valueChanges();

alert( O2A(this.items) );

But it does not work for me.

Thank's!

Answer 1

I will take the example you provide to answer.
The minimum requirement for this to work is to slightly adapt the country.service. We have a change in the constructor() and the private _search() method. We will need to replace the COUNTRIES variable that contains the array of data with your array of users (note that you will need to adapt all the code to match your users attributes):

country.service.ts

...
users: User[];

constructor(private pipe: DecimalPipe) {
    this._search$.pipe(
      tap(() => this._loading$.next(true)),
      debounceTime(200),
      switchMap(() => this._search()),
      delay(200),
      tap(() => this._loading$.next(false))
    ).subscribe(result => {
      this._countries$.next(result.users);
      this._total$.next(result.total);
    });
    // this will get your users and start the _search$ above
    this.firestore.collection('users').valueChanges().pipe(take(1)).subscribe(users => {
        this.users = users;
        this._search$.next();
    });
  }
  
  private _search(): Observable<SearchResult> {
    const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;

    // 1. sort
    // provide your users (instead of COUNTRIES exemple variable) as a param 
    let users = sort(this.users, sortColumn, sortDirection);

    // 2. filter
    users = users.filter(user => matches(user, searchTerm, this.pipe));
    const total = users.length;

    // 3. paginate
    users = users.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
    return of({users, total});
  }
...

Don't forget to rename your variables accordingly ( users instead of countries ) and your type ( User instead of Country ) in methods params.

I won't make all the work, since it is too broad, but at least, you get the idea how to initiate the service with your firestore data.

Change also the SearchResult interface, you'll get a compile error otherwise:

interface SearchResult {
  users: User[];
  total: number;
}