"Unlocking the treasure trove: Extracting a single item from my Firebase real-time database using

Searching for the user's article in my Realtime database to display information.

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

This is my Ionic script page

Below are the imports I have:

I am able to retrieve the user's ID, but I'm facing difficulty in fetching this real-time data from the database.

  import { Component } from '@angular/core';
    import { AngularFireAuth } from '@angular/fire/compat/auth';
    import { AngularFireDatabase, AngularFireList } from '@angular/fire/compat/database';

export class Tab3Page {

  public profileData: any;
  name: string;
prenom: string;

  constructor(private afAuth: AngularFireAuth,
     private db: AngularFireDatabase,
      private toast: ToastController,
      private navCtrl: NavController,
      private authService: FirebaseAuthServiceService) {
  

    this.afAuth.authState.subscribe(
      (res)=>{
        this.profileData = res.uid;
        console.log(this.profileData);      
      }
    )

    this.db.list("users/"+this.profileData).valueChanges().subscribe(details => {
      this.name =details["name"];
      this.prenom = details["prenom"];
      console.log(details);
      
    })

}
    
}

Answer №1

It seems like the issue could be that you are attaching the database listener before the user is signed in. To resolve this, consider moving the subscribe call into the auth state listener.

this.afAuth.authState.subscribe(
  (res)=>{
    this.profileData = res.uid;
    console.log(this.profileData);      
  }
  this.db.list("users/"+this.profileData).valueChanges().subscribe(details => {
    this.name =details["name"];
    this.prenom = details["prenom"];
    console.log(details);  
  })
)

If this approach successfully retrieves the data, it's important to handle the database subscription carefully as the authState can potentially change over time.

Answer №2

Appreciation to Frank for his valuable input I have identified the issue as being related to local variables

this.afAuth.authState.subscribe(
  (res)=>{
    this.profileData = res.uid;
    console.log(this.profileData);

    this.db.list("users/"+this.profileData).valueChanges().subscribe(details => {
      this.name = details[2];
      console.log(this.name);
      
    })
    
  }
)

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

The Effective Implementation of Ui-Select within UI-Grid

After receiving a positive response to my initial inquiry on this platform, I am excited to present another question. I have successfully implemented Brian Hamm's method for incorporating a ui-select in ui-grid. However, I seem to be facing an issue w ...

Enabling logging for the Mapnik SQL query while generating the map

Currently, I am utilizing the npm package known as Mapnik in conjunction with PostGIS. My goal is to include logging functionality that captures the SQL query executed by Mapnik, along with the value of the bbox parameter, when executing the render() funct ...

Guide to Angular 6 Reactive Forms: Automatically filling one text field when another input is selected

I'm currently learning Angular 6 and exploring reactive forms. I want to set up a feature where selecting an option in one field will automatically populate another field. The objective is to have the coefficient input update based on the number sele ...

The npm build command is triggering an error message that reads "Allocation failed due to ineffective mark-compacts near heap limit."

I'm currently working on a ReactJS/TypeScript project on Windows 10. I've been running into issues when trying to build my TypeScript scripts using the following command: "rimraf ../wwwroot/* && react-scripts-ts build && copyfi ...

How can we $eval a function in AngularJS while passing in a parameter?

I am attempting to utilize a directive where I need to $eval the values that contain the function name and parameter value: Example of HTML page: <select mydirective="action('pValue')"> AngularJS directive code: app.directive('mydi ...

ion-select is experiencing display issues

I've been attempting to incorporate select options from the ionic framework, following the guidelines found here: http://ionicframework.com/docs/v2/api/components/select/Select/ <ion-item> <ion-label>Toppings</ion-label> <ion ...

Assigning values to objects based on the types of their properties in Typescript

In my Redux store, I want to create a reducer that can modify any attribute values within the store. Consider the state object defined with specific types: type StoreState = { admins: Admin[]; messages: Message[]; pageInformation: PageInformation; } ...

The minimum and maximum limits of the Ionic datepicker do not function properly when selecting the month and day

Recently, I have been experimenting with the Ionic 2 datepicker. While the datepicker itself works perfectly fine, I've run into some issues when trying to set the min and max properties. <ion-datetime displayFormat="DD-MM-YYYY" [min]="event.date ...

I am interested in adding a personalized icon to the progress bar in Material-UI

I am currently using the MUI linerProgressBar design. I would like to incorporate a custom UI Icon that moves along with the progress. Are there any examples of this available? I have searched for one in MUI but haven't found anything. If you know of ...

Invoking a function from a directive in AngularJS located in a separate file

After extensive research and trying various suggestions, I was unable to find a solution to my question. In my main.js file, there was a single controller that worked perfectly: var app = angular.module('monitoringApp', ['ui.bootstrap' ...

Unable to toggle AngularJs Divs with <select> tags

In my view, I have the following code: <div> <select ng-model="chartType" ng-change="AnalyticsChartTypeChanged(chartType)" ng-init="chartType='Data grid'"> <option value="Data grid">Data gri ...

Experiencing the 'invalid_form_data' error while attempting to upload a file to the Slack API via the files.upload method in Angular 8

I am currently working on a project that involves collecting form data, including a file upload. I am trying to implement a feature where the uploaded file is automatically sent to a Slack channel upon submission of the form. Despite following the guidance ...

Is there a way to delegate properties in Angular 2+ similar to React?

When working with React, I have found it convenient to pass props down dynamically using the spread operator: function SomeComponent(props) { const {takeOutProp, ...restOfProps} = props; return <div {...restOfProps}/>; } Now, I am curious how I ...

My angularjs app hosted on Heroku is experiencing difficulty caching S3 images in the browser, despite setting cache-control headers

I am currently facing an issue with enabling browser caching for S3 images. My AngularJS app is deployed on Heroku and utilizes images stored in an S3 bucket. Despite my efforts, the browser does not cache the images as intended. Instead, it repeatedly req ...

Angular II slash avoiding Pipe

I am working on developing a customized pipe in Angular 2 that will handle the replacement of the backslash ('\') character in a given string. This backslash is commonly used to escape special characters. What I have accomplished so far: T ...

Calculate the total number of rows in my table and display it in the console using AngularJS

Currently, I am working on a web application that includes a table and a checkbox. When the checkbox is checked, I want to display the total number of rows in the table. Here's an example layout: <table> <thead> <tr> <td& ...

Exploring how to traverse a <router-outlet> within its container

I am attempting to switch the active component within a from its parent. After observing how Ionic achieves this, I believe it should resemble the following (simplified): @Component({ template: '<router-outlet></router-outlet>' } ...

Steer clear from using the implicit 'any' type while utilizing Object.keys in Typescript

I have a unique situation where I need to loop over an Object while maintaining their type without encountering the error "Element implicitly has an 'any' type because 'ContactList' has no index signature". Despite extensive discussion ...

React's Material-UI ToggleButtonGroup offers a seamless way

I'm having trouble getting the ToggleButton selected property from material ui to function properly with ToggleButton. I followed the Material Ui documentation and created a StyledToggleButton as shown below: const StyledToggleButton = withStyles({ ...

Discovering the parameter unions in Typescript has revolutionized the way

My current interface features overloaded functions in a specific format: export interface IEvents { method(): boolean; on(name: 'eventName1', listener: (obj: SomeType) => void): void; on(name: 'eventName2', listener: (obj: Som ...