Develop Reference

How can I retrieve the UID of each document retrieved from FireStore DB when I subscribe my service method (performing the query)?

I am working on an Angular project retrieving data from Firebase FireStore database. It works fine but now I am finding problem trying to retrieve the documents UID. I will try to explain my situation in details.
Into my FireStore DB I have something like this:
So, as you can see, at the moment I only have a single collection named calendar containing some documents where each document represent an event on a calendar (but this detail is not so important now).
Into my Angular application I have a service class containing this method that simply perform a query to retrieve all the documents inside my calendar collection:
/**
* Return the list of all the work shift related to all the person in the calendar:
*/
getEvents(): Observable<any[]> {
this.items = this.db.collection('calendar').valueChanges();
return this.items;
}
So this method return an Observable of array on any objects.
Subscribing this Observable into my component I retrieve the list of documents stored into the calendar collection in FireStore.
I have done in this way (this is the code snippet into my component typescript file calling the previous service method):
this.eventService.getEvents().subscribe(events => { this.events = events.map((event) => {
//console.log("START: ", event.start);
var date = event.start.toDate()
var hour = date.getHours();
var startDateAsString = this.fromDateToString(date);
event.start = startDateAsString;
if(hour === 7) {
event['backgroundColor'] = 'red';
}
else if(hour === 15) {
event['backgroundColor'] = 'green';
}
else if(hour === 23) {
event['backgroundColor'] = 'black';
}
console.log("EVENT: ", event);
return event;
})});
So as you can see I am subscribing the previous service method performing the query and I "iterate" on the query resultset using the map() operator building my this.events array. It works fine.
My problem is: in this context how can I retrieve the UID of each documents retrieved by Firebase in order to add this information to the returned event variable?

valueChanges() does not include the id for the documents it receives. You need to use snapshotChanges() and then pipe the data to create an object.
I do something like this in my app
this.db.collection('collectionName').snapshotChanges().pipe(
map(snapshots => {
return snapshots.map(s => {
// if you log s here, you can look through the object
// payload.doc.data() should be the same as what valueChanges returns
// payload.doc.id will be the id
// merge them into a new object
return {...s.payload.doc.data(), id: s.payload.doc.id)}
})
}
);

Can I treat items found through a Promise.all as a firebase collection?

I am stuck in what I thought was a very simple use case: I have a list of client ids in an array. All I want to do is fetch all those clients and "watch" them (using the .onSnapshot).
To fetch the client objects, it is nice and simple, I simply go through the array and get each client by their id. The code looks something like this:
const accessibleClients = ['client1', 'client2', 'client3']
const clients = await Promise.all(
accessibleClients.map(async clientId => {
return db
.collection('clients')
.doc(clientId)
.get()
})
)
If I just needed the list of clients, it would be fine, but I need to perform the .onSnapshot on it to see changes of the clients I am displaying. Is this possible to do? How can I get around this issue?

I am working with AngularFire so it is a bit different. But i also had the problem that i need to listen to unrelated documents which can not be queried.
I solved this with an object which contains all the snapshot listeners. This allows you to unsubscribe from individual client snapshots or from all snapshot if you do not need it anymore.
const accessibleClients = ['client1', 'client2', 'client3'];
const clientSnapshotObject = {};
const clientDataArray = [];
accessibleClients.forEach(clientId => {
clientSnapshotArray[clientId] = {
db.collection('clients').doc(clientId).onSnapshot(doc => {
const client = clientDataArray.find(client => doc.id === client.clientId);
if (client) {
const index = clientDataArray.findIndex(client => doc.id === client.clientId);
clientDataArray.splice(index, 1 , doc.data())
} else {
clientDataArray.push(doc.data());
}
})
};
})
With the clientIds of the accessibleClients array, i create an object of DocumentSnapshots with the clientId as property key.
The snapshot callback function pushes the specific client data into the clientDataArray. If a snapshot changes the callback function replaces the old data with the new data.
I do not know your exact data model but i hope this code helps with your problem.

onSnapshot, forEach, and get() synchronously on Firebase

I am using firebase's .onSnapshot to grab the ID of the users currently online, and store each ID to an array. I successfully deployed .onSnapshot to get the ID of the online users, but I return an empty array at the end
var learning_language;
db.collection(ll_profile).doc(user_uid).get().then(function(doc) {
learning_language = doc.data().learning_language;
})
db.collection(ns_status).where("state", "==", "online").onSnapshot(function(snapshot) {
var ns_match = [ ];
snapshot.forEach(function(userSnapshot) {
db.collection("ns_profile").doc(userSnapshot.id).get().then(function(doc) {
spoken_language = doc.data().spoken_language;
if (learning_language == spoken_language) {
ns_match.push(userSnapshot.id);
console.log(ns_match);
}
})
})
return (ns_match);
What I am trying to do is to first define the learning_language retrieved from the collection ll_profile with the current user's ID named user_uid.
Then .onSnapshot listens to another group of users' online state (which automatically updates if an user is online or offline) inside ns_status collection. After, the returned online user from .onSnapshot is checked if the spoken_language field inside their document (named with their corresponding uid) matches with learning_language defined earlier. If it matches, then store the uid into the array of ns_match.
The values inside ns_match are correct. I think .get() executes asynchronously. That is why ns_match is returned empty.
How should I return ns_match at the end with all the values stored properly?
Thanks in advance.

function getMatches() {
return new Promise(resolve => {
db.collection(ll_profile).doc(user_uid).get()
.then(function(doc) {
var learning_language = doc.data().learning_language;
db.collection(ns_status)
.where("state", "==", "online")
.onSnapshot(function(snapshot) {
var ns_match = [];
snapshot.forEach(function(userSnapshot) {
db.collection("ns_profile")
.doc(userSnapshot.id)
.get()
.then(function(doc) {
spoken_language = doc.data().spoken_language;
if (learning_language == spoken_language) {
ns_match.push(userSnapshot.id);
console.log(ns_match);
}
});
});
resolve(ns_match);
});
});
});
}
getMatches().then(ns_matches => console.log(ns_matches));

wrapping in a promise is the correct move. However, remember that snapshot returns metadata about your result. Particularly, snapshot.size. One can use that value to count records, inside the foreach method, or compare the destination array length with the snapshot.size value

Get Nested Docs in Firestore

Here is my data:
I want to iterate through each event_prod in event_prods and go to the eventGroups subcollection. Once in that sub-collection, I want to loop through each eventGroup in eventGroups and get doc data.
Here's my code thus far:
async function getAllEventGroups() {
let eventGroups = []
try {
let eventProducerRef = await db.collection('event_prods')
let allEventProducers = eventProducerRef.get().then(
producer => {
producer.forEach(doc => console.log(doc.collection('eventGroups'))
}
)
} catch (error) {
console.log(`get(): there be an error ${error}`)
return []
}
return eventGroups
}
Obviously, it doesn't do what I want, but I can't figure out how to get access to the eventGroups subcollection. Calling 'collection()' on 'doc' is undefined. Can someone please help fix this? By the way, I don't care if this requires two (or more) queries as long as I don't have to bring in data I will never use.
Edit: this is not a duplicated because I know the name of my subcollection

You call the .collection on the QueryDocumentSnapshot. This methods doesn't exist there. But as the QueryDocumentSnapshot extends DocumentSnapshot you can call ref on it to get the reference to the requested document.
```
let allEventProducers = eventProducerRef.get().then(
producer => {
producer.forEach(doc => console.log(doc.ref.collection('eventGroups')) // not the ref here
}
)

eventProducerRef is a CollectionReference. The get() method on that yields a QuerySnapshot, which you are storing in producer. When you iterate it with forEach(), you are getting a series of QueryDocumentSnapshot objects, which you're storing in doc. QueryDocumentSnapshot doesn't have a method called collection(), as you are trying to use right now.
If you want to reach into a subcollection of a document, build a DocumentReference to the document, then call its collection() method. You'll need to use the id of each document for this. Since a QueryDocumentSnapshot subclasses DocumentSnapshot, you can use its id property for this:
let eventProducerRef = await db.collection('event_prods')
let allEventProducers = eventProducerRef.get().then(
producer => {
producer.forEach(snapshot => {
const docRef = eventProducerRef.doc(snapshot.id)
const subcollection = docRef.collection('eventGroups')
})
}
)

firebase - handle no data from snapshot

I have a firebase reference, where I pull data down for a specific custom index I created.
requestsRef
.orderByChild('systemgameindex')
.startAt(lastrequest.systemgameindex.toString())
.endAt(lastrequest.systemgameindex.toString() + '~')
.limitToFirst(customElem.dataops.limit + 1)
.on('child_added', function (snapshot) {
var request = snapshot.val() || {};
request.key = snapshot.key();
request.systemColor = customElem.getSystemColor(request.system);
request.description = customElem.truncateText(request.description, 65);
customElem.getUserProfile(request);
customElem.getCommentCount(request.key);
if (request.systemgameindex !== lastrequest.systemgameindex) { customElem.push('requests', request); };
customElem.removeSpinnerRoo();
});
Right before I make the call to firebase, I have a custom spinner I dislay with a function called addSpinnerRoo(), and when data is returned, I make a call to removeSpinnerRoo() to hide the spinner on the DOM.
It works beautifully when there's data to return from firebase, but if the firebase query brings back no results, the callback on child_added never gets fired, so I have a spinner still spinning on the DOM.
Is there a way to handle when there's no data returned within Firebase?
Any insight would be appreciated a lot. Thanks

After reading this from the documentation from here:
The callback function receives a DataSnapshot, which is a snapshot of the data. A snapshot is a picture of the data at a particular database reference at a single point in time. Calling val() on a snapshot returns the JavaScript object representation of the data. If no data exists at the reference's location, the snapshots value will be null.
I was able to do use "val" instead of "child_added" to actually have firebase still fire the callback for the ".on()" method. So my code now looks like this:
var data = snapshot.val();
if (data !== null && data !== undefined) {
var requests = _.map(data, function (val, key) {
val.key = key;
return val;
});
_.each(requests, function (request) {
request.systemColor = customElem.getSystemColor(request.system);
request.description = customElem.truncateText(request.description, 65);
customElem.getUserProfile(request);
customElem.getCommentCount(request.key);
customElem.push('requests', request);
});
}
customElem.removeSpinnerRoo();
And with that, I was able to get what I needed. If this helps anyone, great...