This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Reactive Programming - Rendering on the DOM with RxJS

5:22 RxJS lesson by

Learn how to take data from a network response and display it on the DOM using RxJS reactive event streams.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Learn how to take data from a network response and display it on the DOM using RxJS reactive event streams.

Avatar
br9191fr

Hello
I have one question. In line 15 the argument to the map function is listUser => user (ie [elt] => elt)
I thought that the argument of a map function should be elt => elt

Did i missed something ?

Thanks in advance

In reply to egghead.io
Avatar
Roc

Hi,

First of all, thanks for this series and the very good explanation of each of the concepts.

In this example, it seems that if I wanted to show 100 users instead of 3 the only way to do it would be something like this:

for (let i = 0; i < 100; i++) {
  createSuggestionStream(responseStream).subscribe(user => {
    renderSuggestion(user, `suggestion${i}`);
  });
}

Is this the only way or there is a way of doing this that leverages the functional approach of RxJS?

In reply to egghead.io
Avatar
Roc

As I understand it, this map is a map over the EventStream "array" of RxJS and the value, in this case, happens to be an array also and that's why listUser is an array.

In reply to br9191fr
Avatar
Roc

Omg, the comment posting didn't include my code, It was just a typical for(i=0, i<100, i++) and inside the for just a createSuggestionStream(responseStream).subscription(...).

And thanks in advance!

In reply to Roc
Avatar
Andre

Hi Roc, there is nothing wrong in using a for loop to create many suggestion streams and subscribe to them, it doesn't break the "functional" pattern. On the other hand if we were to create a hundred suggestions on the UI, we could make a stream listOfSuggestedUsers$ which emits an array of all those 100, and in its subscribe we would create elements for each.

In reply to Roc

Locking the response to the console like this is not enough. We also need to render that data on the DOM. Here, we can see our desired output. This was created simply with HTML. Here, we have our header with who to follow. On the right, we have the refresh button. We also have a list with the three suggestions.

Here, we have some placeholder data like this will not be displayed and either this. The first link is a link to the username. We'll take to the GitHub users profile page. We're supposed to fill this href with that link. We're supposed to fill the text content of this link with the user's login name. Also, there's an image element here where we will put the avatar for that user.

How do we do that in Rx with observables? We have this response stream that emits actually an array of users. It has an array containing probably some hundreds of users. We need only three of those. We need to represent somehow the first user, the second user, and the third user. We can do that by creating one stream of events for each of these users.

For instance, we can create a stream for the suggestion of the first user to follow. We do that by getting the response stream which emits arrays. We're going to get those lists of users.

We're going to map that to one of those entries. We do that by doing Math.floor, then Math.random multiplied by the amount of items in that array. This will give us one random user in that array of users. Then we need to do the same thing for the second user like this.

As you can see, this is really repetition of codes. We could actually put this in a function so we can reuse it. Let's call that function create suggestion stream. Given the response stream, it will map that response stream to one random user. There we can call that function by just doing create suggestion streaming giving it the response stream. This will return us an event stream that has one random user. We just do the same for the second user and for the third user.

Now that we have the streams, they don't do anything by themselves. That's the idea of event streams. You need to always add an event listener or subscribe to them and then you have your user. Inside here, we finally have one single user, not an array. We need to render that to the DOM here.

I'm going to call render suggestion with a user and a selector which is suggestion one. Of course, this render suggestion function doesn't exist yet. I need to create that.

Let's go ahead and create that. Render suggestion, it takes some piece of user data and a selector. What I want this to do is get that data, get the element behind that selector, and put the data in that element. Let's go again and get our element behind that selector. Let's get the username link in that element which is username class. We can do something with this element.

We can get the href and put user data HTML URL if I remember correctly. We can do username element and we can set the text content to be user data. Login if I remember correctly again.

Image element, now we need to get that particular image element which is inside that list item. We set the source for this to be user data avatar URL. This user data is an object returned by GitHub's API. If you want to see how the whole structure of this object is, the JSON, you can check the GitHub's specifications.

Off we run. We shall see the first user went...The suggestion one stream got its data from the response stream. We just subscribe to that suggestion one stream and we render this to the DOM. We do that with the other users like this, basically copy pasting and changing the selectors and the stream names two and three. We run again. We're going to see the users rendered to the DOM.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?