Find all documents in Angular Firestore that are related to a specific document_REFERENCE

Seeking a way to search through all documents in collection a that have a reference to a specific document in collection b.

Despite my efforts, I couldn't find a solution here or on Google :/

This is what I tried in my service class:

  getAsFromB(id) {
      var refB = this.firestore.collection("/collection_b").doc(id);
      console.log(refB);

      return this.firestore
        .collection("/collection_a", (ref) => ref.where("refB", "==", refB))
        .snapshotChanges();
  }

However, I encountered the following error: Unsupported field value: refB = custom Object but log says refB is looking good AngularFirestoreDocument

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

Can someone point out what I may have missed or where I went wrong?

Appreciate any help in advance!

angulartypescriptgoogle-cloud-firestore

Answer №1

Here is your initial query:

var refB = this.firestore.collection("/collection_b").doc(id);

You are pointing to a Firestore document, but you need to specify that you want its reference. To correct this issue, update the line as follows:

const refB = this.firestore.collection("/collection_b").doc(id).ref;

Below is an updated version of your function that will display the results of your query for verification:

getAsFromB(id: string) {
   const refB = this.firestore.collection("/collection_b").doc(id).ref;
   console.log(refB);

   return this.firestore
     .collection("/collection_a", (ref) => ref.where("refB", "==", refB))
     .snapshotChanges().subscribe(res => {
       res.forEach(doc => {
         console.log(doc.payload.doc.data());
       })
     });
 }

Since this code belongs in a service, it's advisable to remove the subscribe method. However, I included it for debugging purposes.

Additionally, in Typescript, it is recommended to use const and let instead of var.

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

Encountering a problem while bringing in screens: 'The file screens/xxx cannot be located within the project or any of these folders.'

I am currently working on an iOS application using React Native technology. During the process of importing a specific screen, I encountered an error message. Can anyone provide guidance on how to resolve this issue? Error: Unable to resolve module scree ...

reactjstypescriptreact-native

Converting a stringified array object to an object using Expressjs

When working with Angular, I am sending stringified data using FormData. Here is an example: this.formData.append('data', JSON.stringify(this.collections)) Now my challenge is converting this string back to an object in my Express backend. The d ...

javascriptnode.jsjsonangularexpress

React dynamic table

I've been experimenting with creating a dynamic table in React that allows users to add and delete rows. I need the data entered by the user to be saved, possibly using in-state management so that I can work with it later. Essentially, I'm looki ...

javascriptreactjstypescripttwitter-bootstrapmaterial-ui

Replace the content of the HTML tag in the index.html file with a different HTML file located at a specific URL in an Angular application

Currently utilizing angular universal. The primary URL being: Upon opening this URL, the function res.render('index') is triggered, leading to the rendering of the index.html file, as depicted in the following code snippet. app.get('*' ...

htmlangularamp-htmlgoogle-news

Why is the format incorrect when the Angular 7 (Change)-Function on Input of type Date isn't functioning?

I am facing an issue with updating the date using key input and assigning the selected date to a property of my object. Below is the code I'm currently working with: <input type="date" [value]="dateTime()" (change)="setDate($event)"/> The dat ...

htmlangulartypescripthtml-input

When the user clicks on a specific element, ensure that it is the main focus and generate an overlay

One of my challenges is implementing a custom element that captures user input upon clicking, focusing on it and overlaying other elements. I want the overlay to disappear if the user clicks outside the div. I attempted to achieve this using the iron-over ...

javascripttypescriptpolymeroverlaypolymer-2.x

Challenge with modifying CSS variable names in Angular SSR

Recently, I noticed that some of my CSS variable names are being changed to something else on the server-side rendering build, causing them not to work as expected. An example of this is: .color-black-75 { color: var(--black-75-color); } In my styles. ...

cssangular

Using RxJS iif with various conditions in combination with Angular 9

I am currently working on creating a service using Angular that will retrieve a specific data set. The format of the object returned by the API looks like this: { status: string, totalResults: number, results: [array of objects] } My goal is to ret ...

angularrxjs

Managing dynamic text within a label using Playwright

In my Playwright Typescript test, I have the following code snippet: await page.goto('https://demoqa.com/'); await page.getByLabel('Optionen verwalten', { exact: true }).click(); await page.locator('label').filter({ hasText: & ...

typescriptfilterlabelplaywrightdynamic-text

Updating DynamoDB objects seamlessly in Lambda functions without any conflicts

I am currently working with example Objects that follow this interface structure: interface Car{ id: Number; name: String; tires: Wheel[] } interface Wheel{ id: Number; name: String; radius: Number; } My goal is to store these Car Objects in DynamoDB and ...

typescriptaws-lambdaamazon-dynamodbaws-api-gateway

Managing Emails with Vue and Firestore

I am facing an issue with updating the 'email' field. Whenever I try to change the email address, it gets updated correctly. However, when I attempt to log in again, the new email address does not work; only the old one seems to be functional. Ho ...

javascriptvue.jsgoogle-cloud-firestorefirebase-authentication

Issue with compatibility of Angular Elements across Chrome and IE11 at the same time

Experimenting with Angular Elements has led me to focus on achieving optimal browser compatibility. However, I have encountered a roadblock where adding an IE polyfill for Shadow DOM breaks the Element in Chrome. Initially, I faced the error 'Failed ...

angularecmascript-6ecmascript-5polyfillsangular-elements

When integrating the @azure/msal-angular import into the Angular application, the screen unexpectedly goes blank,

Starting a new Angular app and everything is rendering as expected at localhost:4200 until the following change is made: @NgModule({ declarations: [ AppComponent, HeaderBannerComponent, MainContentComponent, FooterContentinfoComponent ...

angulartypescriptazure-ad-msal

Dealing with custom path problems in Angular 2+ webpack configurations

I am interested in using the @ngneat/tailwind schematics to convert an Angular project into one with a custom webpack configuration. However, after adding this, my scss import paths for fonts and other partial scss files are not resolving, resulting in th ...

angularwebpackangular-schematics

Utilizing Window function for local variable assignment

Currently, I am facing a challenge in my Angular2 service where I am attempting to integrate the LinkedIN javascript SDK provided by script linkedin. The functionality is working as expected for retrieving data from LinkedIN, however, I am encountering an ...

javascriptangulartypescriptscope

Arrange the "See More" button in the Mat Card to overlap the card underneath

I'm currently working on a project that involves displaying cards in the following layout: https://i.stack.imgur.com/VGbNr.png My goal is to have the ability to click 'See More' and display the cards like this: https://i.stack.imgur.com/j8b ...

cssangular

Error encountered during ng update process: The workspace root directory is unable to resolve the "@angular-devkit/schematics" package

ng update The error message stating that the "@angular-devkit/schematics" package cannot be found in the workspace root directory suggests a possible issue with the node modules structure. To address this, you can start by deleting bo ...

angularangular-cli

Update the second select form's list after choosing an option in the first select form in Angular 4

In my form, I have incorporated two select elements within one form tag. The options in the second select element are dependent on the selection made in the first one. Currently, I have set up this functionality using a template-driven approach, with a (c ...

angularfunctiondrop-down-menuparameter-passing

Understanding Typescript typings and npm packages can greatly improve your development workflow

I'm pleased to see that NPM has now included support for importing TypeScript type wrappers. However, I've noticed inconsistency in how these wrappers are maintained. For instance, when attempting to import "node-git" and "@types/node-git", I fou ...

typescriptnpmdefinitelytyped

Determine if the current page is the root page in Ionic 2 - here's how!

Currently, I am trying to verify the name of the current page in Ionic 2. To achieve this, I utilized NavController in my app.component.ts file. However, an error stating No provider for NavController is being displayed. I would appreciate any suggestions ...

androidangularionic2