Rendering API Data

[00:00:00]
>> Next what we're gonna do is we need to be able to add the scores to the page and keep things simple. I'm gonna move this out in to a whole separate function, so let's add a new function called add scores and this is gonna accept our new movie element and it's also gonna accept the scores and we'll just call it from inside this initialized function.

[00:00:21]
So what I'm going to do is, is loop through the scores. So for each score that we get back from our serverless function, we're going to build a little element for it. So I'm going to create an item and we will document.create element. We're going to use a list item.

[00:00:43]
And then we're going to have a label. And the label will be a another document.create element of span. All right, so the label I'm going to give it a class. So just for styling and we're gonna call it source so it's the source of the score. That's where the rating information or the the score information is coming from.

[00:01:10]
I also, because Internet Movie Database is very long, I'm gonna shorten it. For the layout. And we'll do that by saying the label.enter text is going to be if score.Source is Internet Movie Database. I'm going to shorten that to IMDb. Otherwise we're going to use score.Source. Okay, let me collapse this over here so that you can see what's going on.

[00:01:57]
And then once we've got that I want to attach it so we're going to item.append, child label. Okay, so what we've just done is we created a label and then we whoops where did I just go. And then we stuck that inside of this list item. So that's thing one, we've labelled our score.

[00:02:25]
So the next thing that we want to do is we wanna get the value. And we'll do that with a document.create element of span. And then we're gonna set the value intertext to be let's I think there, sorry, score.value. All right. And inside this score.value, that's all we need.

[00:02:50]
So we're gonna item.append child value. All right? So now what we've done is we've taken the score, we've created a list item, we've created a span to hold the source and a span to hold the value and then we've attached both of those to our item. So once we have that, then we are going to get the score element which if you remember we created this scores list unordered list inside of our movie.

[00:03:22]
We've been handed this div, the element that we're going to pass in is that div. So we're just going to look inside of it for the element.query selector, and we're going to grab scores. And then once we have that we can set scoreelement.appendChild, and we're going to put in the item.

[00:03:48]
So, a little bit of kind of like moving back and forth here, but just to recap we start with our movies element. And then we loop through the scores. For each score we create a list item. And inside the list item, we create a span to hold the label so IMDb or Rotten Tomatoes, and then we create a span to hold the values so the score 94% seven out of 10, we attach these the source and the value to the list item.

[00:04:18]
And then we attach the list item to the scores unordered list inside of our movie element. So the next thing that we need to do to get this running is we just have to actually call this so right above our container here. I'm going to run add scores which is the function we just wrote.

[00:04:37]
I'm going to parse in our element, and I'm going to pass in movie.scores. Okay, now assuming I didn't typo anything. When I restart the server, what we should see is that now we get scores attached from the OMDbAPI. Those should be attached to our movie listing. There we go.

[00:05:04]
So now we can see Batman v Booperman, not super popular. Booper, people really like Booper. So we've got a functioning kind of composite data, right? We have our hard coded data from our JSON file, we've got third party data from an API. We've been able to stitch that together in a serverless function.

[00:05:25]
And now, we're using it to display our UI, and all of that is being done without having to manage a server. It just works. It's really, really pleasant. So this is, just like, feel like we're starting to show why this is so exciting, why this gives us so many additional powers as developers to get things done quickly.