Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Map Vue.js Components to Remote Data Streams with RxJS

    John LindquistJohn Lindquist

    This lesson shows how to map the current tab to a remote stream leveraging the combineLatest operator to grab the latest tab value and the values from loading in a remote data set of people.

    vueVue.js
    ^2.0.0
    rxjsRxJS
    ^5.0.0
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:02 rather than hardcoding our people here, let's delete that and use a people stream instead. I'll create a paper stream, so const people. This will use our create loader function. Going to bring this up above it.

    00:19 Just say create loader and pass in our service, starwars.egghead.training/people. That will load in an array of people. We'll go ahead and return this in our object at the bottom, hit Save, and now we have a whole bunch of tabs with the proper names on them. You'll notice that when I click on them that nothing happens, though.

    00:47 That's because the map that we did before, we tried to map the tab ID to the people tab ID, this people no longer exists. The way we check the array of people off of this stream is by using combine latest people. This essentially means take the active tab and when either of these fires combine the two latest values together and then push that down.

    01:18 The way we're going to do that is with a selector function. The arguments are tab ID and the array of people. The tab ID comes from here, and the array of people comes from here. Then, we'll do a very, very similar look-up where we say people, look up the tab ID and grab their current ID.

    01:38 Hit Save there, and now you see Luke shows up. I'll click on C-3PO, R2-D2, Han Solo, keep on scrolling. Everyone is mapped together properly. This people stream is using this create loader promise. The active tab now combines with that and selects that appropriate ID off of the people array that comes back from the people stream.

    02:05 I don't need so many people for my tab, so I'm going to limit them down to, let's say, people slice. Let's do seven. Now we'll have the first seven results...

    Discuss

    Discuss