mergeMap() | RxJS TUTORIAL

[@meolivares06]

Five years and today in 2023 this video still unique. I was trying to make several requests each request with several dependent request and merge the result. For example, get a list of posts, then by each post get the comments and append that to the corresponding post. I just find that here. Thanks.👏

[@sergiiolshanetskyi5488]

Thanks for the explanation. However, I believe, that merging the content of two inputs is not the best applicaton of mergeMap(). The problems with this approach are: 1. If the second input gets modified first the code won't work (as mergeMap in this example was used in a way that the change in the first input triggers listening for the changes in the second). 2. Every time the first input gets changed, new observable gets created behind the scene that would listen for the changes in the second input. This happens when typing a symbol or erasing it. By the time a user starts typing in the second input, many observables might have been silently created and all of them will execute the code to update the content of the span. In this particular example it does not make a huge difference but it is helpful to know the implementation details.

[@oyegorov]

Good catch Sergii!

[@ibknl1986]

Nice to know this happening 8n the backend. Thanks

[@musicplay3]

better way for merging just use forkJoin?

[@user-zb5jp4ti1d]

apart from being able to grasp really cool stuff (through your courses on udemy and this channel) for which i cant thank you enough, your tutorials provide a meta-learning component as well - and that is related to observing how you break down complexity and communicate with such clarity, it makes one wanna weep in joy.

[@academind]

Wow, thanks so much Ashim, that really is an amazing feedback and means a lot to me! Thanks!

[@lexluther48]

Really like you approach to how you explain Rxjs. Explanations are simple, straight forward, and most importantly you back them up with real examples. Thank you again Max!

[@academind]

Thank you Alexander, happy to hear that this is helpful!

[@midoriyaallmight]

Whenever i'm stuck w/ something, i always look for your videos and hope you discuss them on your channel. For the past few days, i can't seem to grasp RxJS easily, luckily you have them. I would like to say thanks a lot Max, you're one of the best web instructors around. As a gratitude, as much as possible i don't skip the advertisements. hehe ;)

[@midoriyaallmight]

to add something, nice explanation on mergeMap. After watching this video and reading the documentation, i think of mergeMap as a nested for loop wherein each item of the outerObservable is mapped onto each item in the innerObservable. Am i correct w/ this thinking?

[@purduetom90]

Finally, an explanation of mergeMap I understand. You’re awesome!

[@marloeleven]

your example here is the only thing that helps me understand mergeMap clearly

[@TheRuiMonte]

Perfectly and clearly explained. Tons of value in this channel.

[@rinomoq6145]

Maximillian is best teacher ever ! Thanx Max for your job )

[@academind]

I don't know what to say but THANK YOU Rino, it really makes me happy to get such an awesome feedback!

[@m3ll0f3ll0]

Best rxjs tuts, much appreciated

[@findjonmoses]

Please keep doing these videos on RxJS...they are so important!! This is invaluable info! :)

[@academind]

There'll certainly be more RxJS content in the future, yes

[@asterizk]

Fantastic explanation, thank you! You got yourself a new subscriber!

[@untrustworth]

Max, I like the way you present it.. especially your books on Angular, PWA etc.. I loved those.. thank you very much.. :)

[@academind]

Happy to read that, although I must say that I didn't release a book so far but you probably refer to the courses :)

[@paymankhayree8552]

best teacher in the world

[@user-rp9iis1en6h]

How to cache images in angular 9 ? Using variable doesn't persist data in case of hard refresh. Localstorage and sessionsgorage is limited to a few mb. So what's the best option?

[@cycostallion]

Fantastic explanation with such a valid use case to go with. Thank you!!

[@academind]

It's simply amazing to read such wonderful comments Cyco, thank you very much for that!

[@quickmaths4762]

Does it also emit if obs1$ never emitted? If yes: what does it emit for obs1? Probably undefined and not an input event right?

[@muhammedfasil9965]

all videos are good , please add more rxjs operators classes , and combinations operators

[@TahaZgued]

Thanks man, I love your approach clearfy things that where blurry even though I use them

[@kevo777ez]

Thank you. Great video!

[@Jadestonk]

such a nice and clear explication

[@ericchen6759]

So what if you want to get both inputs' value, and print out them in the span immediately, how do you implement?

[@musicplay3]

would you say merging observables will be better just using forkJoin? mergeMap better for merging + data transformations (such as passing ob1 data into ob2 for transformation)

[@antonioubedamontero2927]

Awesome! I have a doubt. What happens if it's an error on obs1 le obs2?

[@hirankumarazhakesan2276]

Thanks for a lot. You are really a fantastic trainer.

[@academind]

Thank you so much :)

[@robivered9391]

Hey, for demonstrate the mergeMap the example is fine :) but for two inputs i will use different approach because in example ( video ) try to start form the second input and then go to the first...... not working for "inputs" example i think combineLatest is better combineObs = obs1.combineLatest(obs2, (event1, event2) => { return event1.target.value + ' ' + event2.target.value }) .subscribe( combinedValue => span.textContent = combinedValue ); thx

[@nevaknowmanamesame5089]

slightly modified jsfiddle.net/nfajme5g/

[@mingzhu8093]

Best videos for rxjs.

[@academind]

So happy to read that, thank you Ming!

[@sagardewan4588]

amazing explanation

[@sumeetsood232]

Hi Max, here we combined 2 observables. how can we combine multiple observables?

[@ROHITSHARMA-og7ue]

that is my question too. what we have three sources observable from input event.

[@TahaZgued]

That is the forkJoin operator but it doesn't behave like exactly like the mergeMap

[@maverick_entertainment21]

Excellent description

[@sumeetsood232]

Hi Max, why we need mergemap operator? i got same result without using it- obs1.subscribe(event1 => { obs2.subscribe(event2 => { span.textContent = event1.target.value+ ' ' + event2.target.value; }); });

[@piracyable]

replacing the mergeMap() with switchMap() also does the same. So, why do we use mergeMap()

[@zaynali53]

Excellent Video! Thank you so much Max!! :-)

[@academind]

Thank YOU! I'm glad you're liking it!

[@Herudur]

DUDE! I am becoming a great fan, I think I need to watch all of your videos, let me know what is the best way to support you and learn from you

[@academind]

I'm really happy to hear you're liking it! If you want to support me, grab one of my courses on Udemy - links can be found in all the video descriptions. You'll get a nice discount and learn something and I'll earn some money :)

[@Herudur]

Just enrolled, thanks a lot Professor! ;)

[@gabibrk]

It's like chaining two events, same result here: (event1)=>{ Rx.Observable.fromEvent(input2, 'input').subscribe( (event)=> span.textContent = event1.target.value + event.target.value); });

[@_bykt]

Well explained. Thank you!

[@academind]

Great to read that the video was helpful Victor, thank you very much for your comment!

[@chaayparcharcha]

Awesome explained..

[@fateriddle14]

Thanks, I find the doc doing a really poor job explaining what mergeMap does "This operator is best used when you wish to flatten an inner observable but want to manually control the number of inner subscriptions." Like wtf. Thank you for clearing that mess.

[@academind]

Always happy to read that my videos helped to make things a bit clearer, thank you for sharing this great feedback!

[@kgenskowsky]

Thanks this helped a lot.

[@infiniteeyelashes6729]

- React Native - Next.js - Electron

[@SimplyComplexable]

Hey Max, I love you're videos and your udemy courses, I've taken 2 so far. I don't really understand the use case for this function. Like in the example couldn't you just use event listeners and a function that concatenates the text from both inputs and sets the span text equal to it. I think that would take less code too and not require any imports. Is there some more complex use that couldn't be handled by raw Javascript?

[@academind]

Everything can be done with raw JS but for more complex usecases, Observables indeed offer a cleaner solution. mergeMap() could be helpful when handling multiple Http requests (and responses) for example - you can easily merge them together then.

[@SimplyComplexable]

Thanks Max. That makes sense, I just couldn't think of a good example, but I can see how it would be helpful with HTTP requests.

[@AssemblyWizard]

This should really be done with the combineLatest operator.

Can you do a video on switchMap too? I have trouble to understand this one. Keep up the good work :)

[@academind]

I'll try my best - and switchMap() is coming up on Thursday :)

Mindspace Yeah \o/

[@FredoCorleone]

Is concatMap an alias of mergeMap?

[@JBuchmann]

They are similar but different. I do think thought that flatMap and mergeMap are alias's.

[@user-zb5jp4ti1d]

And Max, can i go off on a tangent and ask what's all this buzz about GraphQL and is that on your tutorial radar. thanks again.

[@academind]

It is, yes. Haven't worked with it too much personally though, so I first need to get a deeper understanding (and some projects with it) myself before teaching anything to you guys :)

[@nicholasc.5944]

6:59 you know the observables are hard when it mergemaps your english into inner german observable

[@maxipop1000]

Nice video like always ! You should talk about the convention of an obs using the $ like this var click$ = Observable.fromEvent(button, 'click');

[@academind]

Thanks and also thanks for the suggestion. You're right, though it's kind of a "soft" convention - used because cycle.js introduced it but not really recommended in official styleguides (as far as I am aware)

[@vaibhavphutane286]

Awesome

[@Дима-ч3у3х]

This example better with switchMap

[@DavidAlsh]

Hey dude, love your videos, even purchased/recommend your Udemy courses. Could you do a video on deep merging an array of objects. Sort of a generic change detection/update fields system. Cases like the new array has fewer items, more items, changes in items. Thanks!

[@debbiec.8704]

d dcixicugucu😐😐😏😑😑💨💝🗨👓💝💭💌💥💢🕳💣💥❣💝💥💙💥☹👺☹👺😠👽👾🤖👹😻👺😻👺😺😻👽😺🤖😺👻

[@LuXxenatorX]

müöördschmäap junge

[@SMatin303]

Bit Complex

[@nidhisarupria3644]

same could be done using merge, not a good example it seems

[@JuanPablodelaTorre]

Use _Observable.combineLatest_ for this use case. MergeMap is a generic solution that doesn't fit all that well here. _Rx.Observable.combineLatest(obs1, obs2).subscribe(([event1, event2]) => span.textContent = event1.target.value + ' ' + event2.target.value)_

[@hemanthvatti4387]

great explanation.......__/\__

[@jasonleelawlight]

Like the video but don't like this method, the api is not well designed in the sense that it has to reach from within the first observer to the second observer, also the terms outer and inner observers are also very confusing and unnecessary. I would rather store the 2 input values in 2 global variables separately and update the span content in subscribe(). I know it's better to avoid global variables but in the presented method obs1 and ob2 are also global variables anyway, so my method is not really worse in this part but will lead to a lot more clear code.