Check out a free preview of the full Rx.js Fundamentals course

The "Mapping" Lesson is part of the full, Rx.js Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates how to map through an array of Observables using mergeMap and switchMap. The mergeMap operator projects each source value to an Observable, then merged in the output Observable. The switchMap operator projects each source value to an Observable, which is merged in the output Observable, emitting values only from the most recently projected Observable.

Preview
Close

Transcript from the "Mapping" Lesson

[00:00:00]
>> So let's go through and let's play with an example. So I've got this area for mapping exercises, and let's go play around with this a little bit, this is in the mapping directory here. Here we have, Get character is a fake promise in this case, it's a fake API request, is a JSON file and here you can see the answer sheet.

[00:00:23]
But go ahead, from this promise Get me the first one in the database and get plucked the name out. That seems fine, that's good, so what we want to do at this point is, we wanna be able to map these in different ways. But what happens if we wanted to get four characters?

[00:00:47]
We wanted to go get, one, two, three and four, so we could do something like of 1, 2, 3, and 4. And maybe this is what we get back from the API that they were looking for. And what I wanna do is, I wanna take those numbers, and we'll see I'm gonna do this wrong first.

[00:01:14]
We'll map them and we'll say, for that number, I want to go get that character. Let's start with the full character at this point. And we'll get that Nth character. And you can see that this doesn't work great, and if you look under the hood these are a bunch of observables.

[00:01:42]
So I can merge map them, instead of a map We gotta require that one, swap this one out. Now you can see it pulls in, each one of them, as its own independent piece. So, it's taking, hey, I need, these ideas in the database, go fire them off in parallel, as they come back, put them on the page.

[00:02:14]
So these are all getting fired in parallel and as they come in, they are getting handled. And so you begin to play around with pieces of this as we go through. So we have the ability to switch between things. This seems kind of interesting for us, like what could we do here?

[00:02:35]
I think switch map is one of the more interesting ones, and once you wrap your head around switch map, you can also theoretically get a sense around how to deal with exhaustion. Just what logic do you want? To write the usage and syntax isn't too different, versus the idea of figuring out how to deal with different pieces of this along the way.

[00:03:01]
So I'll actually show you a simple implementation of it and we play around with it a little bit as well. We'll look at it, we'll try to implement it, also. So I have this playground that I built. And this is the under the hood piece of it. Well, actually, I'll take it for a spin in a second, but we've got the start and the stop that we've seen before.

[00:03:25]
We've got this ability to clear, all that does is clear out the DOM, it's not really important for us. But we're gonna merge, play and pause. And then, we're gonna switch between, if it's running, we're gonna switch between whatever observable we care about ,or this special observable. There's two, two is a strong word, but there are two special observables that RX JS gives us.

[00:03:49]
One is called NEVER. And the other one is called EMPTY. Just as a random guess, what do you think NEVER does?
>> Never-
>> Nothing.
>> Nothing, never emits. It never completes. It's just like a black hole of observable. Nothing happens. And EMPTY will basically, immediately complete. Like I don't wanna do anything here, I am actually done, like that's it, we're finished.

[00:04:17]
So if you look at this switch map code, we have the true and the false coming through. Just like we had that one, two, three, four previously, either true or false is coming through. That value is again true or false. If it's running, I would love to switch to this observable from the very beginning, and forget what you were doing, if another like anything else was happening, because theoretically never could have been happening.

[00:04:44]
If it is false, Then switch to this NEVER observable. So means that when we're running well listen to whatever, this could be, for instance, an interval. You can see how this might work for our timer, where we say, cool switch that interval that's counting away. If it's false, redirect to the NEVER observable.

[00:05:07]
So now we have the ability to change the flow based on other events that come through in this case.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now