Rendering JSON as HTML

[00:00:00]
>> Now what we're gonna do is we're gonna take this output here, this JSON object string that we're getting. And we're gonna turn this into a display. We wanna show it on our Homepage. So we want this to show us our movies. So let's make that happen. And the way that we're gonna make that happen is we're gonna write a little bit of HTML.

[00:00:21]
So let's start out by creating a div. And that div is going to contain our movies. And I'm just gonna leave it empty cuz we're gonna load it with a little bit of JavaScript. Then we're gonna use one of my favorite little HTML things, a template tag. And what a template tag is, is something that doesn't show up on the page.

[00:00:41]
But it lets us write some markup so that we don't have to generate all of our markup with JavaScript. So we'll do a movie and then that's gonna have an image in it. And then we're gonna have an h2. We're also gonna put in like a class for a tagline and then we're not doing this yet, but we will shortly.

[00:01:04]
So I'm gonna get the markup ready. Let's also set up support for viewer ratings. And that's gonna be an unordered list. That's gonna include our scores, okay? So this is what the actual markup for each movie is gonna look like I missed something, got an image. Maybe I just need to make this empty so that it'll, there we go.

[00:01:31]
All right, so we'll just give it an empty source so that it doesn't mess with my auto formatting here. So what this is, is each movie is gonna be a div with a class of movie, it's gonna have an image for the poster. It's gonna have an h2 that will put the name of the movie in.

[00:01:48]
Paragraph that will put the tagline in. And then in a minute here we'll add support for viewer ratings. And so we'll show a headline for that and then we'll store those scores in this unordered list here. So this is all it's semantic HTML, somebody is gonna be able to tab through these and read the data on a screen reader.

[00:02:07]
It's gonna make sense when you look at this HTML, you can kind of get a sense of what's going on. So this is plain old semantic HTML, makes me happy. And then underneath this, let me make this a little bit smaller. I'm gonna start writing some JavaScripts. So let's drop in a script tag.

[00:02:24]
And I'm going to set up a function to initialize the movies. So I'm gonna make it an async function. And we're gonna call it initialize. If I can spell it. Is the hardest part of writing code, I think, is spelling things right. And then we need to figure out how we're gonna get our movies, right?

[00:02:44]
And so to get our movies, we need to call that serverless function. And I'm gonna do that using the built in fetch API. So this is a browser standard. I don't need any dependencies for this. So I'm gonna await fetch and I'm gonna fetch that function that we just wrote.

[00:03:00]
So .netlify/function/movies. Functions is plural. So netlify, functions, movies, and then I'm gonna get a response. Let me break this to another line so it's legible. My response is gonna come back, and I need to tell my code that the response that we got back is JSON. So I just take the response, mark it as JSON, great.

[00:03:31]
And now we have a movies object, and movies are here. Underneath this, then we can just do things with it. So I'm gonna start by grabbing the container for the movies. So we'll use document.querySelector. And we'll get the movies div. That's this one up here. That's where we're gonna put everything, right?

[00:03:58]
So we're just grabbing that div. Then we need to get our template. And our template is also gonna be a document.querySelector and we will select the ID of the movie template, okay? So now that we've got a container, and now that we've got a template, and we've loaded our movies, we're gonna loop through each movie.

[00:04:23]
So we're gonna do movies.foreach(movie). And our process in here is to actually load each movie. So, we're going to first create a new element for the movie. And we do that by getting the template content and then we're gonna clone it. And you have to pass true and I'm not gonna lie, I have no idea why.

[00:04:54]
That's just what Mozilla developer docs tell me to do. So I trust them implicitly. Once we have our template node or our new element, this is what actually is gonna go into the DOM. Then I am gonna get the image out of it. So I can, again use that query selector but instead of doing it on the document, which is the whole page, I'm gonna do it on the element.

[00:05:16]
So I can do an element.querySelector and get that image tag. And then in my image I'm gonna set the source to be movie.poster. And I'm gonna set the alt so that we have some accessibility here. We need a movie.title. I'm gonna set the the actual h2, which is gonna be the name of the movie, do a query selector.

[00:05:44]
And because we're only doing one operation on this one, I'm just gonna do it directly. And we're gonna use innerText, so with HTML, you can set the inner HTML, or you can set the innerText. Because we know this is just a string value we don't wanna open up the opportunity for someone to be mischievous.

[00:06:04]
And like put a script tag in here that could mess with us. So instead, we're gonna use innerText, which prevents any kind of markup from happening. We can only put a string in. And I'm gonna set that to movie.title, okay? One more, I'm just gonna duplicate this line this time so that we don't have to write the whole thing.

[00:06:21]
And I'm gonna use .tagline so that we get this paragraph of tagline here. And I want the text to be the tagline, we've got movies.foreach, for each movie we are creating a new element by cloning the template. Then inside of our element, we update the image to have the URL of the poster and the title of the poster.

[00:06:49]
We set the title, we set the tagline, and now we need to add it to the DOM. So we're gonna use that container that we got up here on movies, and then we're gonna appendChild, and we do it just like that. Okay, so we've written this initialized function, now we just need to call it.

[00:07:10]
So down here, we run initialize, save it. Let's give this thing a try. So I'm just gonna go back out. Hey, look, it's working. So we can see here that we have, wait I type out my one of this to be viewer not view. So we've got our headline that was hand coded.

[00:07:33]
But now for each movie, we have created a new entry and appended it to the DOM. So we've got the movie poster. We've got the title, we've got the tagline, and then we've got this section for viewer ratings once we get to that part. So this is kind of the power of what I'm talking about, what we just did.

[00:07:53]
If we had to set up a back end service or create a node server, build an express server, get a PHP site gone. We would have had to figure out where the hosting is and figure out how to set up routing and figure out all this stuff. Whereas with a serverless function, we just get to write a little bit of logic to get our movies.

[00:08:17]
And then we get to write some front end code to pull it in. And now we could also shift this around like we're loading at on the client side. We could if we wanted to use like a static site generator. We could even do it with 11D if we wanted to.

[00:08:32]
We could do this request at build time. And then we wouldn't even need to have the like that JavaScript. We wouldn't even need JavaScript on this website to show these movies. We could build it from like build time loaded data. But for the sake of not making this a workshop about static site generators and instead focusing on serverless functions, we're loading async on the client side.

[00:08:57]
But just keep that in mind that like you can use a serverless function at any point in the build. You just have to like think about that accordingly and make sure that you're calling, it's just like an API. You can call an API whenever you just use it during the build, use it during client side.

[00:09:13]
And you'll just have different concerns about exactly how you wanna do that based on what you're trying to accomplish.