Firestore : Retrieve a single document

Question

I want to retrieve a single document from Firestore. So I do not mean the list of documents in the collection (I know how to do that). Let's say I know one of the key-value pair of the document and I would like to find and retrieve the document into Angular 4.

interface Occupations {
 duration: number;
 id_entity: number;
 id_job: number;
 id_user: number;
 salary: number;
 start_time: number;
}

occupationDoc:AngularFirestoreDocument<Occupations>;
occupation: Observable<Occupations>;

<h1>A specific post:</h1>

  <h3>{{ (occupation | async)?.salary }}</h3>
  <p>{{ (occupation | async)?.id_user }}</p> 
  <p>{{ (occupation | async)?.duration }}</p> 
  <p>{{ (user | async)?.lastName }}</p>

Tiffan Meloney · Answer 1 · 2017-11-10T04:52:55.937

3

Use flatmap to return the single document data:

First import the .flatMap() property.

import { AngularFirestore } from 'angularfire2/firestore';
import 'rxjs/add/operator/mergeMap';

Then query your collection and limit it to 1 document:

this.afs.collection('collection', ref => ref.where('value', '==', true) 
.limit(1)).valueChanges().flatMap(result => result);

Then you can subscribe to that and it will return the flatened json instead of an array.

EDIT:

And you can just do like this to use it in your html directly:

this.userInfo = this.afs.collection('collection', ref => ref.where('value', 
'==', true).limit(1)).valueChanges().flatMap(result => result);

In the html code:

<p>{{ (userInfo | async)?.duration }}</p>

edited Nov 10 '17 at 04:52

answered Nov 09 '17 at 15:10

Tiffan Meloney

31
1
4

Thank you so much!!! I did exactly that. Plus some other steps to get to where I wanted. I will post the full code in a new answer. – Eric Nov 09 '17 at 20:44
you can just use the async pipe to directly parse the result. {{ (variable | async)?.duration }} – Tiffan Meloney Nov 10 '17 at 03:42
Isn't what I have done in the original question? Or you are thinking of something else – Eric Nov 10 '17 at 04:48
Just edited answer to show you what I meant. You dont have to do the subscribe part & json stringify inside the component. – Tiffan Meloney Nov 10 '17 at 04:53
Ok I see! Thank you – Eric Nov 10 '17 at 10:01

score 0 · Accepted Answer · answered Nov 09 '17 at 20:48

This is the solution I came up with :

//HTML
{{userInfo}}

//TypeScript
this.afs.collection('Occupations',
ref => ref.where('id_user', '==', this.idAuth)  
.limit(1))
.valueChanges()
.flatMap(result => result)
.subscribe(
    v => {
        let y = JSON.parse(JSON.stringify(v));
        this.userInfo = y.duration;                 
    }, 
    (error) => {
             console.log(error);
    }, () => {
        console.log('Finished');
    });

Firestore : Retrieve a single document

2 Answers2

Linked