Tips on performing a join query in Firebase Firestore

I need help figuring out how to merge data from two different collections in Firestore based on the `uid`. One collection is for reviews, each of which includes a unique `uid`. I want to match this `uid` with users' details such as `username` and `photoURL`.

function getUsersReviews(userId){
      const reviewsRef = this.afs.collection('users-reviews', ref => ref.where('uid', '==', userId) );
      reviewsRef.switchMap(reviews => {
        let userObservables = reviews.map(status => this.afs.doc(`users/${userId}`))
        return Observable.combineLatest(...userObservables)
          .map((...users) => {
            reviews.forEach((review, index) => {
              review.username = users[0][index].username;
              review.avatar = users[0][index].photoURL;
            });
            return reviews;          
          });
      });
    }

I'm having trouble getting this code to work properly. I keep encountering errors like 'switchMap' not existing on Firestore collection.

 error TS2339: Property 'switchMap' does not exist on type 'AngularFirestoreCollection<{}>'.

Even though switchMap is imported, it still doesn't seem to be recognized.

Answer №1

AngularFirestoreCollection does not function as an Observable, meaning that there is no availability of the switchMap method within it. For further insight, please refer to the actual implementation found at: https://github.com/angular/angularfire2/blob/a13bf9b10e78dc74a1bfe61fea22480d2da859c1/src/firestore/collection/collection.ts#L45

To work around this limitation, utilize the snapshotChanges or stateChanges method within AngularFirestoreCollection in order to obtain an Observable where you can then appropriately implement switchMap.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a new function and assign it to "this" using the button inside ngFor loop

I am working with a li tag that has a *ngFor directive: <li *ngFor="let items of buttons"> <button (click)="newMap(items.id, $event)"> {{ items.name }} </button> </li> The buttons array looks like this: buttons = [ {nam ...

Experience the enhanced Angular Material 10 Date Range Picker featuring the exclusive matDatepickerFilter functionality

Is it possible to use Angular Material 10 MatDateRangeInput with matDatepickerFilter? When attempting the following: <mat-form-field appearance="outline"> <mat-label>Label</mat-label> <mat-date-range-input [formGroup]=&q ...

Wait for a specialized occurrence in Typescript before moving forward

I have a function: async ready():Promise<boolean> { await this.myClass.firstToComplete(); this.myClass.secondToComplete(); } However, firstToComplete() needs to wait for an event it is listening for before proceeding. async firstToComplete() ...

Get instant alerts for all devices that go offline

I'm currently in the process of developing a native iOS and Android app that utilizes Firebase for sending push notifications. Everything seems to be functioning properly so far, however I've encountered an issue where if my devices are switched ...

Issues with maintaining the checked state of radio buttons in an Angular 4 application with Bootstrap 4

In my Angular 4 reactive form, I am struggling with the following code: <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary" *ngFor="let item of list;let i=index" > <input type="radio" name="som ...

Issue with importing aliases in Angular 7 production environment

Hello everyone! I have encountered an issue where using alias on import and building the project in production mode (--prod flag) results in the alias being undefined. Interestingly, this behavior does not occur in development mode. Any suggestions on how ...

Displaying Data in a Tree Structure Using JSON

I am currently working on an Angular project which includes a nested JSON file structured as follows: I would like to import this JSON data from the file and create a treeview populated with its contents. How can I achieve this? { "?xml": { ...

Tips for defining a distinct series of key-value pairs in typescript

Having experience with a different language where this was simple, I am finding it challenging to articulate a sequence of pairs: Each pair is made up of two basic elements (such as strings or numbers) Each element may appear multiple times within the lis ...

Can wildcard paths be imported in React using Typescript?

Is there a way to dynamically import a React Typescript Component from a wildcard path, similar to the following code snippet? const Component = loadable( () => import(`../../../src/**/*/${component_name}`), ); I have searched numerous solutions on ...

Exporting third-party types in an npm package

I recently developed an npm package that relies on types from the DefinitelyTyped repository. I added these types as devDependencies in the npm package and was able to use them without any issues, like so: export class Example { constructor (options: Ex ...

Navigating through an array in Angular 5: a guide

This question may seem simple, but I'm having trouble figuring it out. Here is the code snippet I am working with: getInstabul(): void { this.homeService.getWeather() .subscribe((weather) => { this.instanbulWeathers = weather ...

Discover the Steps to Incorporate WebSocket in Angular 10 Without Using StompJS

Looking for advice on incorporating WebSocket connections with the latest Angular version 10. Since StompJS is now considered outdated, I'm curious if there are more modern (typescript) alternatives available for managing WebSockets in Angular? If an ...

The parameter must be of type 'string', but you are attempting to assign a 'Promise<any>'

Starting a React App requires fetching the user's information from localStorage and initiating a socket connection with the server based on the user's id. However, when trying to pass the user's id to the socket function, TypeScript throws ...

Angular 2 ngSubmit triggers unexpectedly on occasions when it is not supposed to

Currently, I am working on developing an Ionic 3 application with Angular 2 and TypeScript. In the app, there is a form that is responsible for sending data to our server. The issue I am facing is that whenever I click on the following button: <butto ...

Is it possible for me to create an If statement that can verify the current index within a Map?

I have the following TypeScript code snippet: export default class SingleNews extends React.Component<INews, {}> { public render(): React.ReactElement<INews> { return ( <> {this.props.featured ...

Ways to generate an Angular 7 component

Seeking guidance on creating an angular 7 component. I have forked a jsFiddle at this link: https://jsfiddle.net/gauravshrestha/fdxsywLv/. The chart in the fiddle allows data points to be dragged up and down. My goal is to convert this into a component whe ...

Leveraging $implict for transferring several parameters

Need help with creating a recursive template that can accept multiple parameters: <ng-container *ngTemplateOutlet="testTemplate; context: {$implicit:jsonObj1}"> </ng-container> <ng-template #testTemplate let-Json1> </ng-template> ...

Node.js Decrypts Data Before Sending Response from Database

Issue Update I'm currently facing a challenge in reinserting a decrypted value back into the response after decrypting it. I just need guidance on how to place a value back into the response after manipulation. Scenario Background Within the backen ...

Angular 7 Material: How to ensure that mat-select autofill does not persist the source value after it has been cleared on keypress

My goal is to have complete keyboard control over this component. This means ensuring proper focus on tab press and resetting the temporary item when necessary. After adding the temporary item to the list, it should refocus on the first line item field. O ...

What is the best way to create a dynamic icon using React and TypeScript?

Excuse me, I am new to using React and TypeScript. I'm having trouble getting the icon to change based on the status in AppointmentType. The body color is working fine, but the icons are not changing. Can someone please help me solve this issue? const ...