Dynamically Render Component

[00:00:00]
>> Maximiliano Firtman: We need to do something else also. It's not just taking the template. We need to dynamically render the content. So I need to go to my API. I need to get the movies, top movies and random movies, and fill the gaps. Which gaps, the URLs. I have one gap here, another gap here, okay?

[00:00:28]
so that's the next step. So now, within connected callback, I can create a function. I can call this render. You don't need to call it render, so it's not really It. It's not a method coming from the superclass. It's not connected callback. It is a method that we need to override, but not render, okay?

[00:00:49]
But then we can call this. render. So after we put the template, I can go and try to get everything that we have from the API. So, for example, I can get the top movies from where? From the API, so I will await for API.
>> Maximiliano Firtman: An API it's something that it's on a another module.

[00:01:21]
So when I press return, it's adding me an import. And you know what's the next step after that import. What's the next step?
>> Maximiliano Firtman: Come on, come on.
>> Speaker 2: Dot js.
>> Maximiliano Firtman: Dot js. Remember, it's not going to work. I need to add dot js manually. And also because I need to await, I need to add async to my render.

[00:01:46]
Okay, remember async await. So now I have top movies. So what's the next step? Well, I need to render then, okay? But before doing the rendering, so I need to take the top movies and do a for each, for example and do something with it. I know that after TopMovies, I need to do the same thing, exactly the same thing for RandomMovies.

[00:02:10]
Remember that we have two sections and two APIs. So instead of doing manually and copying and pasting, I'm going to do something that you may like or dislike. To be honest, I will create another function inside. In JavaScript, it's not really common, but you can create functions inside functions.

[00:02:30]
It's local function, okay? So it's perfectly valid, so I can call this render movies in list. I receive the movies and the list to the UL, and I will do this for every list. So then I can call render movies in list with the top movies, and the UL is document get element by ID.

[00:02:58]
I think it was top 10. And then I can call it with RandomMovies. Get RandomMovies.
>> Maximiliano Firtman: RandomMovies and RandomMovies. Does it make sense? So this is perfectly valid. And now here, the idea is that I will first need to take the list and I will clear the list, in case it has something inside.

[00:03:29]
So I will clear the contents, and I will do a footage over the movie. So I will loop through with the for each function or I can use a standard for each. It's up to you. This is functional programming. It's up to you which one do you prefer to use.

[00:03:47]
And for every movie I'm going to do something, okay? So what is a list? It's a UL. So UL needs list items, LIs, inside. So I'm going to create LIs. How? Like this document.createElement li. This is pure dom management vanilla JavaScript. And what I can do is I can append a child with something.

[00:04:18]
Or in fact, let me do this first. Just for testing I will say, inside the li, I can change the inner HTML or the text content. This is for debugging purposes only.
>> Maximiliano Firtman: Movie.title, okay? It's not my final code. And then I need to take the list. I'm going to append that li to the list.

[00:04:43]
Does it make sense? So now let's see what happens if I refresh. Actually, we have some errors.
>> Maximiliano Firtman: Well, it seems like we have an API issue here first. So we can try to solve the problem first. So there is a missing forward slash. So if I go to API.js I should add the forward slash to the base URL or add them to each get a, up to you.

[00:05:20]
>> Maximiliano Firtman: And if I refresh now, yeah, it looks terrible, but something is there. Something that I'm seeing is that I'm also removing the titles.
>> Maximiliano Firtman: That is because in my web component, in the HomePage Web component, I should say that from the top-10. In fact, let's replace getElementById with querySelector, and I will use the ID top 10, the ul that I have inside.

[00:05:53]
Does it make sense?
>> Maximiliano Firtman: So I will take the ID random UL. Because, if not, it's also replacing the h2. In the HTML the section top 10 has the title and the list. If I'm taking top 10, it's replacing everything I have here, including the UL, okay? Does it make sense?

[00:06:17]
So now, if I refresh. Yeah, is it still not good, but better.
>> Speaker 3: Do we put the template outside in that system, there we go.
>> Maximiliano Firtman: That's a good question. So can we put the template outside of the HTML? Sure, how to do that? You create a template.

[00:06:33]
We can create the templates folders and put it there. And then in the web component typically you do that in the constructor of the web component. You are going to actually make a fetch for that templates, Home Page, HTML. It's a manual thing. That's how you do that.

[00:06:56]
There is no declarative way to say that, like template href or template source. No, you need to do it manually. So you grab the HTML manually using fetch, and then you inject that into your component, okay? Does that make sense? That's the process structure you do that