RxJS mergeMap

by ardydedase

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.7/rxjs.umd.min.js"></script>
<h1>
RxJS mergeMap
</h1>

TypeScript

// mock a userIDs API call
const getUserIds$: rxjsObservable = () => {	
	const userIds$: rxjs.Observable = rxjs.of(1, 2, 3, 4, 5);
  return userIds$;
}

// mock a user profile API call
const getUserProfile$: rxjs.Observable = (userId) => {
	const userProfiles$: rxjs.Observable = rxjs.of('a', 'b', 'c', 'd', 'e');
  return userProfiles$;
};

const retrievedUsers$: rxjs.Observable = getUserIds$().pipe(
  rxjs.operators.mergeMap(userId => {
    return getUserProfile$(userId).pipe(rxjs.operators.map(userProfile => {
      return userId + userProfile;
    }))
  }),
);

retrievedUsers$.subscribe(x => { console.log('retrieved user: ' + x) });