In ionic app, I want to display the data stored in

Question

In ionic, I want to display the user's email and location which are stored in firestore, but the user's firestore document id is their email address. How can i get their data and display to them

In authentication.ts

import { Injectable } from "@angular/core";
import { AngularFirestore } from '@angular/fire/firestore';
import * as firebase from 'firebase/app';

@Injectable()
export class AuthenticationService {

  constructor(private firestore: AngularFirestore){}

  registerUser(value){

     firebase.auth().createUserWithEmailAndPassword(value.email, value.password)

     this.firestore.doc(`users/${value.email}`).set({
      Email: value.email
    })
  }


  userDetails(){
    return firebase.auth().currentUser;
  }
}

In display.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      User Welcome
    </ion-title>

  </ion-toolbar>
</ion-header>

<ion-content padding>

<div *ngFor="let item of info>
      <h1>{{ item.Email }}</h1> 
    </div>

  <ion-button (click)="logout()">Log Out</ion-button>
</ion-content>

In display.page.ts, I have given code to add email and location to firestore now i want to display the data what i am doing is

display.page.ts

ngOnInit(){

    this.authService.read().subscribe(data => {

      this.info = data.map(e => {
        return {
          Email: e.payload.doc.data()['Email'],
          Location: e.payload.doc.data()['Location'],
        };
      })
      console.log(this.info);
    });
}

In authentication.ts

read() {
    return this.firestore.collection('users').snapshotChanges();
  }

The problem is it displaying all the documents data

Answer 1

In your service you could use something like this to retrieve that user's data:

getUser(id: string) {
   return this.firestore.collection('users').doc(id).get();
}

Then you call this function within your component like this passing your key (email in your case):

this.someService.getUser(email).then((value) => {
    console.log(value.data)
}