Retrieve data from a Firestore document in an Ionic application

I have a service that retrieves a specific document from Firestore using the getBidremains method.

The method in the TypeScript class is called in ngOnInit like this: this.userInfo = this.firestoreService.getBidremains(userId).valueChanges().subscribe(data => console.log(data));

Although I can see the data being fetched correctly in the console, when trying to access this.userInfo.remainBids, it returns as undefined.

However, in the HTML file (after removing .subscribe), I am able to display the correct value from Firebase using {{ (userInfo | async)?.remainBids}}

I'm struggling with understanding what I am doing wrong here. My goal is to retrieve the document and be able to read the values of the fields within.

The Firestore database document fields are simple, containing email, name, and other properties.

The function in the Firestore service is named getBidremains(userId: string).

This is the TypeScript class where the call is made: this.userInfo = this.firestoreService.getBidremains(userId).valueChanges().subscribe(data => console.log(data));

Answer №1

.subscribe() call results in a Subscription object being returned

If you want the remaining bids to be stored in this.userInfo.remainBids, make sure to utilize it within the subscribe method itself.

this.userInfoSubscription = this.firestoreService.getBigremains(userid).valuechanges().subscribe(data => {
    this.userInfo = data;
});

Additionally, remember to unsubscribe from the Subscription inside ngOnDestroy to prevent memory leaks.

Answer №2

The userinfo variable is linked to a Subscription, however, the Subscription does not contain a property called remainBids. You have two options: either assign the variable within the subscribe function as shown below:

...subscribe(data => {this.userInfo = data})

or convert your userInfo variable into an Observable and assign it like this:

this.userInfo = this.firestoreService.getBigremains(userid).valuechanges()

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

Defining the type of the createAction() function in TypeScript within the context of Redux Toolkit

Lately, I have been delving into the redux-toolkit library but I am struggling with understanding the type declaration of the createAction function as demonstrated below. The createAction function returns a PayloadActionCreator which includes a generic of ...

Is there a way to access or delete a randomly generated document ID in Firestore?

Need help with code to delete an item (current method not working) const docRef = firebase.firestore().collection('users').doc(firebase.auth().currentUser.uid) docRef.collection('tasks').doc(this.task.id).delete() ...

Trying to enter the function, but it exits without executing

I'm facing an issue with my function that involves making multiple calls to an observer. I need the function to wait until all the calls are complete before returning. I attempted putting the return statement inside the subscribe method, but it result ...

Adding jQuery and other libraries to Typescript for optimal functionality

After spending days researching and struggling, I am reaching out here for clarification on the process of importing a library in Typescript. I used to just add the script tag and everything would work fine. Now that I am working on building a MEAN-Stack ...

Guide on altering an element's attribute in Angular 2

Is there a way in Angular to dynamically change the attribute of an HTML element? I want to create a button that can toggle the type attribute of an input from password to text. Initially, I thought about implementing it like this: Template: <input na ...

Tips for picking a query in Codeigniter and showcasing it in Ionic

I'm unsure if my code for a select query in Codeigniter is correct as I keep receiving this output from my console: View screenshot of my console home.php (Codeigniter - controller) $postdata = file_get_contents("php://input"); if (isset($postdata ...

Why does the request body show as null even after passing body data in Prisma?

My application uses Prisma for database storage with MySQL. It is built using Next.js and TypeScript. I have set up the API and it is functioning properly. However, when I try to save data sent through the API, the `request.body` is null. Interestingly, wh ...

Error occurs with navctrl when using jquery in Ionic 3

Recently, I started using Ionic framework, I have been integrating jQuery in Ionic to make REST API calls. However, whenever I try to use navCtrl with jQuery, an error pops up in the Chrome console, ERROR TypeError: Cannot read property 'push' ...

401 (Unauthorized) Error on retrieving data

I am currently developing a basic login feature using the HTTP Auth Interceptor Module. Within my LoginController, the code looks like this: angular.module('Authentication') .controller('LoginController', ['$scope', '$r ...

Tips for effectively matching a type definition pattern in TypeScript

Good evening! I'm currently working with Angular and rxjs, but I have a feeling that TypeScript is going to play a significant role in my project today. I've been exploring different methods to achieve my goal, but it's definitely challengi ...

Creating a completely dynamic button in Angular 6: A step-by-step guide

I have been working on creating dynamic components for my application, allowing them to be reusable in different parts of the program. At this point, I have successfully developed text inputs that can be dynamically added and customized using the component ...

Exploring the power of flow.js within an Angular 2 Typescript project

I am trying to incorporate flowjs or ng-flow into my Angular 2 application. After installing the flowjs typings using npm install --save-dev @types/flowjs from However, upon importing it into my component with import { Flow } from 'flowjs';, ...

Looking for elements that match in an array

Currently working on a basic program that requires checking if the input string exists in the array. To simplify it, for example, if someone types 'Ai', I want the program to display all elements in the array containing the letters 'Ai&apos ...

What is the process for incorporating a new index signature into a class declaration from a file.d.ts in typescript?

I am facing an issue with a class in my project: // some npm module export class User { fname: string; lname: string; } Unfortunately, I cannot modify the declaration of this class from my project root since it is an npm module. I wish to add a new in ...

Having trouble reading local storage in Angular 2

I have inserted a token into local storage and am attempting to console.log it. Here is my code snippet: ngOnInit(){ console.log('Member Info: ', JSON.parse(localStorage.getItem('LOCAL_TOKEN_KEY'))); } Although this seems correct ...

Tips for sending FormData and request body with angular's httpclient

I need help updating my Angular application package from @angular/http to @angular/common/http. During the process, my code is breaking for a specific reason. Previously, I was able to send both form data and request body in the following manner: this.ht ...

Is there a way to show uppercase values in Angular's tooltip as capital letters?

Here is my HTML code: <i [class]="item.icon" [pTooltip]="item.item" tooltipPosition="bottom" ></i> The value inside item.item is 'ATTACHMENT' and I am unable to modify it from the ts file. Is there a way ...

Include the complete path to the base href within an Angular application

How can I retrieve the base href in Angular, including the domain (or subdomain)? Here is a use case: I need to add the og:image property using the Meta service. The current content shows as /image.jpg, but I want it to display as https://example.com/ima ...

Unable to generate a file on Firebase platform

I've made updates to my firestore rules, and while the simulator is working correctly, I'm encountering an insufficient permissions error when creating a new document. Below are the firebase rules in question: match /users/{usersid} { a ...

Angular loop is unable to detect changes in the updated list

My Angular application is facing a peculiar issue that I can't seem to figure out. // Here are the class attributes causing trouble tenants: any[] = []; @Input() onTenantListChange: EventEmitter<Tenant[]>; ngOnInit(): void { this. ...