Returning JSON

[00:00:00]
>> The next thing that we wanna do is I actually wanna use a server less function, right? I wanna show how these solve a problem. And the way I'm gonna do that is let's start by loading some data. So actually, let me commit my progress here, so that we can, let me check out a branch called progress and I will commit at each.

[00:00:25]
I don't have my aliases set up on this laptop. I need to do that. So let's add all these, I'm gonna git add everything, [SOUND] jeez. Git status and good, we're good. All right, and then I'm gonna push and set the origin to, What did I call this, progress?

[00:00:59]
Okay, so if at any point today you find yourself lost, you can check out the progress to reset to where we are right now. So yeah, that's what we will do. If you need to just catch up or if wanna skip an exercise, you can just catch up and get to where we are by checking out the latest on the progress branch.

[00:01:23]
So next, let's load some data. So I want to load some movies. Now, I created some movies for this and we've got, I'm gonna close this one up, so we can see what's going on. I have four movies here, I made some spoofs of a fun movie. So Batman v Booperman, we've got Starship Boopers, the movie Booper, that Joseph Gordon Levitt classic, and In The Boop, and we are going to display these on the screen.

[00:01:54]
So let's do that. I'm gonna create a new function, I'm gonna call it movies.js. And in this, I'm gonna start by just loading my movies. And again, we're using CommonJS here, The node style loading of require instead of import. Then I'm gonna export a handler. And again, that's an async function and that needs to return a status code and we want that status code to be 200 and then a body.

[00:02:31]
And so the body, this movie's file, this is a JSON object, right? So we can't just put it in like this, it won't quite do what we want. It's gonna get weird. So instead, what we're gonna do is we're going to use JSON.stringify and JSON.stringify just takes that object and it turns it into a string that can be parsed.

[00:02:59]
And the nice thing about that is that it's kind of we're serializing the data to be movable between places and that's gonna be really common in serverless functions. This is when we're sending data around, you're probably gonna be stringingfying and parsing things to read and write that data.

[00:03:20]
And we can take a look at what that actually looks like. So if I, let's see, actually, let's try it without and I'll show you what breaks. So I'm gonna save this, I'm gonna start the server again. Not what I meant. Netlify dev, okay. So now, I can go back out to my browser here and open up my localhost and I'm gonna go to movies.

[00:03:49]
Okay, so see here, it says incorrect function response body. That's because we tried to send what it interpreted as a JavaScript object, which isn't text, it's not something that it can actually send across. And so we get this data and it just doesn't like that, it must have a string body.

[00:04:09]
So by stringifying, JSON.stringify, we solve that problem. So now, if I go back out and I refresh, there's our data. Okay, excellent. Everybody, take a second, get that running. The next thing we're gonna do is we're gonna update our web app to call this serverless function and actually load that data.