I want to have two maps inside one pipe, like this:
take(1),
map(({ users } => users.filter(user => user.uid = uid)),
map((data: User) => {
let user = Object.assign({}, data)
if ('_seconds' in user.createdAt) {
user.createdAt = new Date(user.createdAt._seconds * 1000)
}
return user
})
I never have experience with RxJs before, but I guess, this looks so wrong. What the proper way to do this?
There is no problem with it. However, I don't see why you need to have multiple map operator. You can merge them like this:
take(1),
map(({ users }) => {
const data = users.filter(user => user.uid = uid); // something should be wrong here, data is an array.
let user = Object.assign({}, data)
if ('_seconds' in user.createdAt) {
user.createdAt = new Date(user.createdAt._seconds * 1000)
}
return user
})
Related
I need to make two calls to Firebase (as it doesn't support OR queries) and merge the output into one array at the end to return to the calling service.
I have something that gets pretty close but it outputs a 2D array of arrays (one for each call to Firebase). I've tried a few things and this is the best I can get to. Any help on tidying up the below would be great.
getAllFriends(): Observable<[Friendship[], Friendship[]]> {
const invitesSent = from(this.afAuth.currentUser.then(user => {
return user.uid;
}))
.pipe(
switchMap(
userid => {
return this.db.collection('friendships', ref => ref.where('inviter', '==', userid)).snapshotChanges().pipe(map(actions => {
return actions.map(action => {
const data = new Friendship(action.payload.doc.data());
data.id = action.payload.doc.id;
console.log(data);
return data;
});
}));
}
)
);
const invitesReceived = from(this.afAuth.currentUser.then(user => {
return user.uid;
}))
.pipe(
switchMap(
userid => {
return this.db.collection('friendships', ref => ref.where('invitee', '==', userid)).snapshotChanges().pipe(map(actions => {
return actions.map(action => {
const data = new Friendship(action.payload.doc.data());
data.id = action.payload.doc.id;
console.log(data);
return data;
});
}));
}
)
);
return combineLatest([invitesSent, invitesReceived]);
}
Friendship is just an object with property: value pairs, nothing special.
I have tried then putting a .pipe() after this returned observable but that just stops the subscription firing in the calling service.
What about returning, at the end, something like this
return combineLatest([invitesSent, invitesReceived]).pipe(
map(([frienships_1, friendships_2]) => ([...friedships_1, ...friendships_2]))
)
I try to retrieve datas in a subcollection based on the key received on the first call.
Basically, I want a list of all my user with the total of one subcollection for each of them.
I'm able to retrieve the data from the first Payload, but not from pointRef below
What is the correct way to achieve that?
getCurrentLeaderboard() {
return this.afs.collection('users').snapshotChanges().map(actions => {
return actions.map(a => {
const data = a.payload.doc.data()
const id = a.payload.doc.id;
const pointRef: Observable<any> = this.afs.collection('users').doc(`${id}`).collection('game').valueChanges()
const points = pointRef.map(arr => {
const sumPoint = arr.map(v => v.value)
return sumPoint.length ? sumPoint.reduce((total, val) => total + val) : ''
})
return { id, first_name: data.first_name, point:points };
})
})
}
I tried to put my code in a comment, but I think it's better formated as a answer.
First you need subscribe your pointRef and you can change your code like this.
getCurrentLeaderboard() {
return this.afs.collection('users').snapshotChanges().map(actions => {
return actions.map(a => {
const data = a.payload.doc.data()
const id = a.payload.doc.id;
const pointRef: Observable<any> = this.afs.object(`users/${id}/game`).valueChanges() // <--- Here
const pointsObserver = pointRef.subscribe(points => { //<--- And Here
return { id, first_name: data.first_name, point:points };
})
})
}
....
//Usage:
getCurrentLeaderboard.subscribe(points => this.points = points);
And if you going to use this function alot, you should start to denormalize your data.
I currently have this situation:
#Service My Service
private users = ['user1','user2'];
//Generate list of requests to join
private getHttpList(): any[] {
let gets = new Array();
for(let index in this.users)
gets.push(this.http.get('https://api.github.com/users/' + this.users[index]))
return gets;
}
...
getList(): Observable<any[]> {
return forkJoin(this.getHttpList())
}
And in my component, I do the subscribe
this.MyService.getList().subscribe(results => {
for(let res in results) {
//...Do something here
//..I wanna do the get in of https://api.github.com/users/{user}/starred
}
})
Suppose that I just know that the "starred url" after the result of getList(), how to I can "synchronous" this part, or what's the correct form to do this?
**I try do it hardcoded --Result id wrong, because the "res" is a "interable"
this.MyService.getList().subscribe(results => {
let url = 'https://api.github.com/users/';
for(let res in results) {//This don't do the things "synchronous"
this.http.get(url + res.login +'/starred').catch(err => {
throw new Error(err.message);
}).subscribe(starred_res => {
//So we set the starred_list
res.starred_list = starred_res
})
}
})
Thanks...
As I understand you want to get starred list for every user.
The simplest way is to get all starred lists and match them with users result.
// Get users
this.MyService.getList().subscribe((results: any[]) => {
const url = 'https://api.github.com/users/';
// Create requests to get starred list for every user
const starredRequests = results.map(
res => this.http.get('https://api.github.com/users/' + res.login + '/starred')
);
// Wait when all starred requests done and map them with results array
Observable.forkJoin(starredRequests).subscribe(starred => {
results.forEach((res, index) => {
res.starred_list = starred[index];
});
console.log(results);
});
});
I have three subject. like this:
const s1$ = new Subject()
const s2$ = new Subject()
const s3$ = new Subject()
these three subjects call next() emit same value: const fruit = {id: 1, name: apple};
and, I have three methods to handle the logic one to one correspondence of the subjects call next(fruit) method.
method1() {
//called when s1$.next(fruit)
}
method2() {
//called when s2$.next(fruit)
}
method3() {
//called when s3$.next(fruit)
}
I want to implement this:
// here maybe not Observable.merge, it's just a thinking.
Observable.merge(
s1$,
s2$,
s3$
)
.doSomeOperator()
.subscribe(val => {
//val could be s1$ emit, s2$ emit or s3$ emit
//but the val is same, the fruit.
//do some map like s1->method1, s2->method2, s3->method3, so I can omit if...else statement.
const method = this.method1 | this.method2 | this.method3.
method();
})
How can I implement this, thanks.
Use map operator to add a distinguish sources.
export class AppComponent {
s1(val) {
console.log('s1', val);
}
s2(val) {
console.log('s2', val);
}
constructor() {
const s1= new Subject();
const s2= new Subject();
const m1= s1.map(val=> ({val, source:'s1'}));
const m2 = s2.map(val=> ({val, source:'s2'}));
Observable.merge(m1, m2)
.subscribe(({val, source}) => {
this[source](val);
});
s1.next('apple');
s2.next('apple');
}
}
If there are no priority order (given that no matter which Subject emits, you want to have the method called), I would suggest the following:
// here maybe not Observable.merge, it's just a thinking.
Observable.merge(
s1$.map((val) => ({fn: (arg) => this.method1(arg), val})),
s2$.map((val) => ({fn: (arg) => this.method2(arg), val})),
s3$.map((val) => ({fn: (arg) => this.method3(arg), val}))
)
.subscribe({fn, val}=> {
fn(arg)
});
You can also execute them at the map operator. But well, it depends what you are trying to achieve here
I am trying to modify and then sort a list. I am completely noob at this :(
I was able to do it with 'combineLatest' but the problem is that I have always to modify array with the function below 'groupByDateAndTournament'.
My outcome:
create observable of the list and sorting parameters (favoriteTournaments, teamRanks)
modify list with 'groupByAndTournament' only if observable list has changed
sort by favorite only if obsevable favoriteTournament has changed
sort by ranks only if observable teamRank has changed
this.subscription =
this.matchesService.getUpcoming()
.merge(
this.favoriteService.getFavoriteTournaments().flatMap((data) => {
return {'favoriteTournaments': data}
}),
this.teamsService.getTeamRanking().flatMap((data) => {
return {'teamRanks': data}
})
).scan((acc, curr) => {
let upcomingMatches;
if (curr.upcoming) {
upcomingMatches = this.groupByDateAndTournament(curr);
}
if (curr.favoriteTournaments) {
upcomingMatches = this.sortByFavorite(curr)
}
if (curr.teamRanks) {
upcomingMatches = this.sortByRank(curr);
}
return upcomingMatches;
})
.subscribe()
So I managed it with combineLatest
Observable.combineLatest(
this.matchesService.getUpcoming().map((data)=> this.upcomingService.combineUpcomings(data)),
this.favoriteService.getFavoriteTournaments(),
this.teamsService.getTeamRanking(),
(matches, favoriteTournaments, teamRanks) => this.upcomingService.prepareUpcomingMatches(matches, favoriteTournaments, teamRanks)
).subscribe((data)=>
this.ngZone.run(() => {
this.upcomingMatches = data;
this.loading = false;
})
);
It still has issues.PrepareUpcomingMatchesfunction is reruning when any of the observables is changed.