I'm not very familiar with RxJS and I have a question. In an Angular service class, there is a method that retrieves data from Firebase Firestore database:
async getAllEmployees() {
return <Observable<User[]>> this.firestore.collection('users', ref => ref.where('profileType', '!=', 'admin')).valueChanges();
}
The method returns an Observable containing User objects.
Here is the definition of the User interface:
export interface User {
firstName: string;
surname: string;
completeName: string;
email: string;
photoUrl: string;
phoneNumber: string;
companyName: string;
vatID: string;
profileType: 'admin' | 'user' | 'unknown';
UID: string;
approved:boolean;
}
Now, I need to add the completeName field (which is not present in Firestore) to each object retrieved from the Observable array. I believe I can use the RxJS map operator for this. Here is what I tried:
return <Observable<Employee[]>> this.firestore.collection('users',ref => ref.where('isEmployee', '==', true)).valueChanges()
.pipe(map(userObj => {
const completeObj = {
completeName: userObj["firstName"] + " " + userObj["surname"],
...userObj
}
console.log("completeObj: ", completeObj);
return userObj;
}));
However, when I log the output, I see the following object created:
completeObj:
{0: {…}, completeName: "undefined undefined"}
0: {firstName: "Andrea", isEmployee: true, socialSecurityCode: "NBLNDRH501O", password: "XXXXXX", isAdmin: false, …}
completeName: "undefined undefined"
__proto__: Object
It seems like the new calculated field is not being added to each object in the array returned by the Observable, but rather to the Observable itself. What am I missing? How can I correct this?