How to retrieve the Id of a single Firestore document? - angularfire2

Question

This is my code:
import { Component, OnInit } from '#angular/core';
import { AngularFirestore
, AngularFirestoreCollection
, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
interface Country {
id?: string;
name?: string;
code?: string;
flag?: string;
continent?: string;
}
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Firestore - Documents';
private countryRef: AngularFirestoreCollection<Country>;
docId: any;
constructor( private afs: AngularFirestore ) {
this.countryRef = this.afs.collection('Country', ref => ref.where('code', '==', 'za'));
this.docId = this.countryRef.snapshotChanges().map( changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Country;
data.id = a.payload.doc.id;
return data.id;
});
});
console.log(this.docId);
}
ngOnInit() {}
}
I am expecting an ugly firestore id but instead I am getting this:
Observable {_isScalar: false, source: Observable, operator: MapOperator}

Answer 1

You are getting data as Observable const data = a.payload.doc.data() as Country
you need to subscribe to get the data
this.docId.subscribe(docs => {
docs.forEach(doc => {
console.log(doc.id);
})
})
Here is the recommended way to do it
export class AppComponent implements OnInit {
title = 'Firestore - Documents';
private countryRef: AngularFirestoreCollection<Country>;
docId: Observable<Country[]>;
constructor( private afs: AngularFirestore ) {
this.countryRef = this.afs.collection('Country', ref => ref.where('code', '==', 'za'));
this.docId = this.countryRef.snapshotChanges().map( changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Country;
const id = a.payload.doc.id;
return { id, ...data };
});
});
this.docId.subscribe(docs => {
docs.forEach(doc => {
console.log(doc.id);
})
})
}
ngOnInit() {}
}
Most common practice to retrieve data from firestore using angularfire2 are .valueChanges() and .snapshotChanges(). valueChanges() method provides only the data. It strips all meta data including keys. On other hand .snapshotChanges() will return all data including metadata.
In your code when you do const data = a.payload.doc.data() as Country; it only returns the data with out key. and when you map it to const data id will be ignored because you specified your constructor like id?: string; null safe mode.
Then you get the id const id = a.payload.doc.id; and somehow you need to return it the way you want your interface is. By doing this return { id, ...data }; you are returning all data with id too. and ...data will append all its field one by one after id. you can learn more about this feature here Hope you understand.