Render on the DOM with RxJS

[00:00] 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.

[00:22] 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.

[00:49] 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.

[01:20] 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.

[01:34] 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.

[02:02] 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.

[02:39] 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.

[03:00] 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.

[03:16] 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.

[03:52] 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.

[04:18] 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.

[04:48] 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.