Combining Firebase Queries with AngularFire2

Question

Combining Firebase Queries with AngularFire2

Update:

The issue with encountering empty value fields was due to missing keys in the database, so much of the discussion here may not be relevant to your specific question. If you are seeking a way to merge queries in AngularFire2, the provided answer below does a solid job at accomplishing this. I am currently utilizing combineLatest instead of forkJoin. To implement this, make sure to include

import 'rxjs/add/observable/combineLatest';

.

My Firebase structure is denormalized as follows:

members
  -memberid1
    -threads
       -threadid1: true,
       -threadid3: true
    -username: "Adam"
    ...

threads
  -threadid1
      -author: memberid3
      -quality: 67
      -participants
         -memberid2: true,
         -memberid3: true
     ...

I aim to display the username in my threads view, which is sorted by quality.

Here is my service:

getUsername(memberKey: string) {
    return this.af.database.object('/members/' + memberKey + '/username')
}

getFeaturedThreads(): FirebaseListObservable<any[]> {
    return this.af.database.list('/threads', {
        query: {
            orderByChild: 'quality',
            endAt: 10
        }
    });
}

This is how my component is set up:

ngOnInit() {
    this.threads = this.featuredThreadsService.getFeaturedThreads()
    this.threads.subscribe( 
        allThreads => 
        allThreads.forEach(thisThread => {
            thisThread.username = this.featuredThreadsService.getUsername(thisThread.author)
            console.log(thisThread.username)
        })
    )
}

Despite having implemented this setup, unfulfilled observables seem to be logged to the console for some reason.

https://i.sstatic.net/W8XlO.png

I am looking to assign these values to a property of threads so that it can be rendered in my view like this:

<div *ngFor="let thread of threads | async" class="thread-tile">
    ...
    {{threads.username}}
    ...
</div>

Update: Included console.log for allThreads and thisThread

https://i.sstatic.net/tpXeU.png

https://i.sstatic.net/iO408.png

Update: Subscribed to getUsername()

this.featuredThreadsService.getUsername(thisThread.author)
        .subscribe( username => console.log(username))

Resulting in objects without any values being displayed:

https://i.sstatic.net/Gi2dF.png

angular typescript firebase firebase-realtime-database angularfire2

Answer 1

Answer №1

To create an observable based on the getFeaturedThreads function that retrieves information about members and updates the user names in each thread's participants property, follow these steps:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/first';
import 'rxjs/add/operator/switchMap';

let featuredThreadsWithUserNames = this.getFeaturedThreads()

  // Switch to new member queries every time getFeaturedThreads emits:

  .switchMap(threads => {

    // Create an array of observables for updating user names in threads:

    let memberObservables = [];
    threads.forEach(thread => {

      // Update the author's name:

      memberObservables.push(this.af.database
        .object(`members/${thread.author}`)
        .first()
        .do(value => { thread.author = value.username; })
      );

      // Update the participants' names:

      Object.keys(thread.participants).forEach(key => {
        memberObservables.push(this.af.database
          .object(`members/${key}`)
          .first()
          .do(value => { thread.participants[key] = value.username; })
        );
      });
    });

    // Join the member observables to update the threads and return them:

    return Observable.forkJoin(...memberObservables, () => threads);
  });

This will generate an observable that emits whenever getFeaturedThreads emits but does not re-emit if user names change. To ensure re-emitting on name changes, replace forkJoin with combineLatest and remove the first operator from the member observables.

Answer 2

To create an observable based on the getFeaturedThreads function that retrieves information about members and updates the user names in each thread's participants property, follow these steps:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/first';
import 'rxjs/add/operator/switchMap';

let featuredThreadsWithUserNames = this.getFeaturedThreads()

  // Switch to new member queries every time getFeaturedThreads emits:

  .switchMap(threads => {

    // Create an array of observables for updating user names in threads:

    let memberObservables = [];
    threads.forEach(thread => {

      // Update the author's name:

      memberObservables.push(this.af.database
        .object(`members/${thread.author}`)
        .first()
        .do(value => { thread.author = value.username; })
      );

      // Update the participants' names:

      Object.keys(thread.participants).forEach(key => {
        memberObservables.push(this.af.database
          .object(`members/${key}`)
          .first()
          .do(value => { thread.participants[key] = value.username; })
        );
      });
    });

    // Join the member observables to update the threads and return them:

    return Observable.forkJoin(...memberObservables, () => threads);
  });

This will generate an observable that emits whenever getFeaturedThreads emits but does not re-emit if user names change. To ensure re-emitting on name changes, replace forkJoin with combineLatest and remove the first operator from the member observables.

Answer 3

Answer №2

In order to efficiently handle joins between users, I created a specialized service that caches previously retrieved user data and seamlessly integrates it with the referencing information using minimal code. This service utilizes a nested map structure to facilitate the joining process:

constructor(public db: AngularFireDatabase, public users:UserProvider) {
    this.threads = db.list('threads').valueChanges().map(messages => {
      return threads.map((t:Message) => {
        t.user = users.load(t.userid);
        return m;
      });
    });
}

The UserProvider service implementation is structured as follows:

@Injectable()
export class UserProvider {
  db: AngularFireDatabase;
  users: Map<String, Observable<User>>;

  constructor(db: AngularFireDatabase) {
    this.db = db;
    this.users = new Map();
  }

  load(userid:string) : Observable<User> {
    if( !this.users.has(userid) ) {
      this.users.set(userid, this.db.object(`members/${userid}`).valueChanges());
    }
    return this.users.get(userid);
  }
}

A comprehensive demo showcasing the functionality of the joins along with necessary boilerplate can be found here.

Answer 4

In order to efficiently handle joins between users, I created a specialized service that caches previously retrieved user data and seamlessly integrates it with the referencing information using minimal code. This service utilizes a nested map structure to facilitate the joining process:

constructor(public db: AngularFireDatabase, public users:UserProvider) {
    this.threads = db.list('threads').valueChanges().map(messages => {
      return threads.map((t:Message) => {
        t.user = users.load(t.userid);
        return m;
      });
    });
}

The UserProvider service implementation is structured as follows:

@Injectable()
export class UserProvider {
  db: AngularFireDatabase;
  users: Map<String, Observable<User>>;

  constructor(db: AngularFireDatabase) {
    this.db = db;
    this.users = new Map();
  }

  load(userid:string) : Observable<User> {
    if( !this.users.has(userid) ) {
      this.users.set(userid, this.db.object(`members/${userid}`).valueChanges());
    }
    return this.users.get(userid);
  }
}

A comprehensive demo showcasing the functionality of the joins along with necessary boilerplate can be found here.

Combining Firebase Queries with AngularFire2

Update:

Answer №1

Answer №2

Similar questions

How to eliminate the ng-component tag from an Angular 8 table row template

Instructions on resolving the issue: The type 'string | ChatCompletionContentPart[] | null' cannot be assigned to type 'ReactNode'

Values within the inner ngFor loop have been selected from the outer ngFor loop

Tips for looping through an array of objects in Angular 9 and adjusting the time if the <mat-checkbox> is selected

Make sure to wait for the observable to provide a value before proceeding with any operations involving the variable

How to use TypeScript to modify button styling with an OnClick() event handler

Utilizing ng-bootstrap within a rebranded module

How can we pass the onClick prop from a child component to a parent component in React with Typescript?

Navigating through a dictionary in React TypescriptWould you like to learn

Angular 2 regex for validating FQDN/URL formats

Output the current screen to the console using the Stack.Navigator component in React Native

Is it possible to execute user-defined functions dynamically in a Node.js application without having to restart the server

What strategies work well for managing Firestore integration within a React application?

Tips for determining the minimum value within an array of objects across multiple keys using a single function

Angular ngFor does not display the JSON response from the API (GET request)

Lazy loading routes in Angular 2 that include auxiliary router outlets

Type errors in NextJS are not being displayed when running `npm run dev`

Is there a way to seamlessly transfer (optional) parameters from a CloudFormation template to a CDK resource within a CfnInclude without statically defining the list of parameters?

Encountering compilation errors with TypeScript files in Angular 2 while using Visual Studio 2017

Converting a Typescript generic type `{[key: string]: T}` into an object literal

Combining Firebase Queries with AngularFire2

Update:

Answer №1

Answer №2

Similar questions

How to eliminate the ng-component tag from an Angular 8 table row template

Instructions on resolving the issue: The type 'string | ChatCompletionContentPart[] | null' cannot be assigned to type 'ReactNode'

Values within the inner *ngFor loop have been selected from the outer *ngFor loop

Tips for looping through an array of objects in Angular 9 and adjusting the time if the <mat-checkbox> is selected

Make sure to wait for the observable to provide a value before proceeding with any operations involving the variable

How to use TypeScript to modify button styling with an OnClick() event handler

Utilizing ng-bootstrap within a rebranded module

How can we pass the onClick prop from a child component to a parent component in React with Typescript?

Navigating through a dictionary in React TypescriptWould you like to learn

Angular 2 regex for validating FQDN/URL formats

Output the current screen to the console using the Stack.Navigator component in React Native

Is it possible to execute user-defined functions dynamically in a Node.js application without having to restart the server

What strategies work well for managing Firestore integration within a React application?

Tips for determining the minimum value within an array of objects across multiple keys using a single function

Angular ngFor does not display the JSON response from the API (GET request)

Lazy loading routes in Angular 2 that include auxiliary router outlets

Type errors in NextJS are not being displayed when running `npm run dev`

Is there a way to seamlessly transfer (optional) parameters from a CloudFormation template to a CDK resource within a CfnInclude without statically defining the list of parameters?

Encountering compilation errors with TypeScript files in Angular 2 while using Visual Studio 2017

Converting a Typescript generic type `{[key: string]: T}` into an object literal

Values within the inner ngFor loop have been selected from the outer ngFor loop