URL Parameters

[00:00:00]
>> So one of the things that you would do in a web server is read parameters off of the URL. These can be query string parameters, or they can be parameters passed on the body of the request. So what we wanna do is look at how we can do both of those things with this simple web server.

[00:00:15]
So, let's modify this app so that we actually pass in the name that we wanna say hello to. So up here in our URL, what we wanna do is just say pass in the name. And then, just say if it was Burke, then we would want it to say, Hello Burke instead of Hello World, or what have you.

[00:00:31]
So in order to pull this off, we need to read the query string parameter. So, how do we do that? Well, this is one of these places where we're gonna use the debugger to figure out how we can do that. So, let's get out of this. And what we wanna do is I'm just gonna put a break point here, so we can take a look at the incoming request.

[00:00:54]
So let's go back and create a launch file with Deno, if you remember, Deno. All right, I'm gonna get that right before the end of the day. And we're gonna point it at exercise, and then app.ts. All right, so let's go ahead and run this now. Make sure our break point is there, yep, so let's launch.

[00:01:18]
And it's gonna go ahead and break on the first line. If you don't want it to break on the first line, you can change this inspect, right here. In the launch.json, you can change inspect BRK to just inspect, and then it won't do that, it won't break on the first line in the program.

[00:01:32]
And then you can see your parsing allow-all. Okay, so it's running now, let's go ahead and come back over here. Let's collapse this, get all this noise out of the way. And let's refresh the browser. Our program, and it should break, does. Let's just take a look at the req object and see what we're working with here.

[00:01:57]
So here's our req object. The IntelliSense is quite large cuz we've got the font size cranked up. But what can we work with here? Nothing on the body, nothing new. It's a get method, okay, right here. Okay, so it looks like we're getting the URL. It's giving us the whole path after the address.

[00:02:16]
So we could probably use this to parse out the query string. So, how do we do this? Well, remember I told you that Deno wants to stay as close to browser concepts as possible. And because of that, we can use something called URL search params, which is a browser API inside of Deno to do this.

[00:02:40]
So what we can do here is we can say const params = new URL search params. And you see that it's there in the autocomplete, because VS Code knows about this API, it's a browser API. So it's available for us to use here. And then what URL search params is gonna want is the string that it's gonna use to parse out the params.

[00:03:06]
So what URL search params does is it just gives us an API for interacting with, parsing out these URL parameters and interacting with them. Now, I should note that when I was testing this, for some reason, URL search params cannot handle this slash right here. It doesn't know what to do with this slash, and that slash is gonna be there, no matter what, and so we actually have to pull it off.

[00:03:31]
So the easiest way to do that is to just do a substring. And then we're just gonna pull off the first character and if we omit the second argument to substring, that's just gonna give us the rest of the string. So what we're saying here basically is, start at the second character of the string, and give us from that character on to the variant.

[00:03:53]
And then what we can do here is we can say, the name const name = params.get, right? And that when looking for the name parameter. And then, down here in our, stead of returning this, what we can do instead is return and then watch the magic, there it is.

[00:04:14]
We're into name instead. But we might wanna do name or, in case it's not passed in because otherwise we'll just get undefined. Okay, so just to recap what we just did, we figured out that the URL on req has the path. We're gonna use the URL search params method, which is a browser API, to parse it.

[00:04:44]
And then once we parse it, we can just look for the name parameter. And then we'll return that in HTML. So let's go ahead and start our server again, I think this was it. No, this was it. Running, all right, I misspelled running. All right, so let's stop this cuz we, all right so it says, Hello Burke.

[00:05:09]
All right, perfect. So let's change this, Hello Luis. All right, it's working, look at that, very nice. Okay, so we've successfully been able to parse a query string in a simple Deno server using URLSearchParams. Now what I want you to get from that is that you can use that browser API inside of your Deno applications to solve problems.

[00:05:34]
So you might ordinarily go to NPM to try to solve that problem, to try to parse that query string, but you don't need to do that. You can just use that API.