Load Data from an Array of ids with Observable.forkJoin in RxJS
A common scenario when loading data is to load an initial array of ids then load each object associated with that id. The result you really want from that scenario is a simple array containing all the loaded objects. Observable.forkJoin allows you to pass in an Array of Observables (such as Observable.ajax requests) and then forkJoin will wait for each Obeservable to complete then resolve them back into a simple Array for you.
[00:00] When I use Observable.ajax to load this "Stories" URL -- and I'll subscribe to that -- get the results, and log out the results, what we get is an AJAX response. Let's get the response property off of that. The response is an array of IDs, which are IDs of stories.
[00:23] Let's move the e response up to here, re-map it, so e.response. I also only want three of them, so try that again. We have these three IDs. From here, with these IDs, I want to load the related stories.
[00:41] What you're probably trying to do is switchMap. This is an array of IDs it's passed in. Again, it's these three IDs. Then you'd map on the IDs because it's an array. I'd want each of those, which is an ID, to build the URL.
[00:56] I'll say URL is itemURL which, when I pass in an ID, it builds out this string properly. Say itemURL, pass in the ID. That will give me that string and then return an Observable.ajax of that URL.
[01:15] What that's going to give us is three observables. Let's go ahead and get the responses off of each of these as well. Now, we're done with three observables with that response stuck inside, each one pushed through as it's available.
[01:29] What we really want is an array of these responses so we can use that array somehow inside of our app. What we turn to here is what's called Obersvable.forkJoin. What forkJoin can do is take an array of observables, like observable of "Hello" and "there, everyone." If I subscribe to this, you'll see the result is going to be an array that says, "Hello there, everyone."
[02:01] That's because forkJoin took this array of observables and flattened it back into a regular array and pushed that result out. It waited for all of them to complete and then gave me the result.
[02:14] We can use this exact same concept here because this IDs map gives us back an array. If I wrap this in an Observable.forkJoin from here down to here and hit save. I refresh, and once all three of these are done, we get three objects back in an array as a result.
[02:35] You see we've turned this original -- I'd comment these lines out -- array of IDs, and then we forkJoin them into when I refresh an array of objects, which are the response of those IDs being called on this URL.
Thank you, John. This is exactly how I'd use Egghead to learn.
Thank you, I finally understand how to use forkJoin