CODEWITHSUNDEEP
typescriptfirebaseionic-frameworkgoogle-cloud-firestoreangularfire2
CODEr
CODEr

Reputation: 33

How to get current user data from firestore?

I'm working on an Ionic 4 Project, where I want to display all the posts from the current user once the user log into the application. Currently, I'm using snapshotChanges() and subscribe() method (as shown below) to get the data from firestore. But it gives me every single data from the firestore document. Having the userID and postID references on both document, how can I get the value of author and desc from that specific user or is it possible? To be specific, how can I display user(6YbhQux2sgTH66F0cJpdcT87Pw83)'s post (54d039ec-5b3c-4ee9-95a0-418b06365f25) that contains author and desc?

Firestore: firestore image

Here's what I did:

getData.service.ts 

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({
    providedIn: 'root'
  })
export class getData { 
    constructor(
      private firestore: AngularFirestore
    ) { }

    readData() {     
      return this.firestore.collection('promotions').snapshotChanges();
    }
}

post.ts

import { AngularFirestore } from '@angular/fire/firestore';

@Component({
  selector: 'app-post',
  templateUrl: './post.page.html',
  styleUrls: ['./post.page.scss'],
})
export class PostPage implements OnInit {
 constructor(
     private afs: AngularFirestore
 ){}


ngOnInit() {

this.getData.readData().subscribe(data => {

  this.posts = data.map(e => {

    return {
      id: e.payload.doc.id,
      Author: e.payload.doc.data()['author'],
      Description: e.payload.doc.data()['desc'],
    };

  })
  console.log(this.posts);
 });
 }
}

post.html

<ion-card no-padding *ngFor="let post of posts">
    <ion-card-header>
      <ion-card-title>{{post.Author}}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>{{ post.Description }}</p>
    </ion-card-content>
</ion-card>

I also tried using afAuth.auth.currentUser to get the current user id and the posts but it shows an error Property 'map' does not exist on type 'DocumentSnapshot'. I am new to this and not sure how to proceed.

let user = this.afAuth.auth.currentUser;
uid = user.uid;

this.afs.firestore.collection('users').doc(uid).get()
    .then(doc=>{
       var a = doc.data().posts
       console.log(a);
       this.afs.firestore.collection('posts').doc()
       .get().then(doc2=>{
         this.promotions = doc2.map(e=>{
           return {
             id: e.payload.doc2.id,
             Author: e.payload.doc2.data()['author'],
             Description: e.payload.doc2.data()['desc'],
           };
         })
     })
  })

UPDATE

let user = this.afAuth.auth.currentUser;
uid = user.uid;

   const docs = this.afs.collection('users');
     const userinfo = docs.snapshotChanges()
     .pipe( 
       map(actions => 
         actions.map(a => 
           { const data = 
             a.payload.doc.data(); 
             const id = a.payload.doc.id; 
             const Author = a.payload.doc.data()['author']
             return { id, data, Author
           }; 
        })
       ) 
     );
     console.log(userinfo);

Output: userInfo

Upvotes: 2

Views: 8661

Answers (2)

Jose V
Jose V

Reputation: 1496

In order to get the "author" and "desc" of the posts that were created by a user, you could do the following:

let user = this.afAuth.auth.currentUser;
uid = user.uid;


this.afs.firestore.collection('posts').where('user', '==', uid).get().then(posts => {
  postsCreatedByUser = posts.docs.map(e => {
    return {
      Author: e.data()['author'],
      Description: e.data()['desc'],
    };
  }))
})

Note that, in order to filter the posts, I use the .where() method

Upvotes: 1

Peter Haddad
Peter Haddad

Reputation: 80914

To get the author and desc, try the following:

let user = this.afAuth.auth.currentUser;
uid = user.uid;

const docs = this.afs.collection('users');
    const userInfo = docs.snapshotChanges().pipe(
      map(data => {
        return {
          id: data.payload.doc.id,
          Author: data.payload.doc.data()['author']
          Description: data.payload.doc.data()['desc']
        };
      }));

It seems you are using angularfire, first put the reference at the document userid then using snapshotChanges, which returns an Observable, you can then retrieve the data. Pipe is an instance method in the Observable class that is used to stitch together functional operators into a chain (map is one of those operators).

Upvotes: 0

Related Questions