I want to show you something really cool now before we move on.
In fact, you can even think of this as a complete ðŸŒŸ"bonus lecture" ðŸŒŸ, because what I want to do is I want
to show you how we can extract data from the URL and then display it on the page.
How cool would that be?
And of course, we do this only once the user clicks on submit.
It's just quite interesting to know and it's quite fun.
But in order to do this, we're going to have to use an interface. (WHAT) You can think of an interface
as kind of an object that has a whole lot of properties and methods that we can use, and it's given
to us by the web itself, by the browser itself.
And the one we're going to be using in order to deal with query strings is called URLSearchParams.
That's an interface.
It's like an object.
And like I mentioned, it just defines methods to work with the query string of a URL.
And if we implement the URLSearchParams, we get
returned to us an object that we can directly use in a For...Of loop.
Don't worry, I'm going to show you exactly how it works.
So here we go.
Here's our example we looked at previously in Visual Studio Code and this is our index file.
What I want to do
and let's just you know you can see my directory here is blank.
I've only got one file - an index.html file.
But I want to create another HTML file
now. Let's just call it "results.html".
And that's where we want to display all of our results.
So let's create a very very simple HTML template.
Within there we can have a body.
Here we can have a div, with ID of results.
Right now we can just leave that div blank.
We can style it however we want.
That's why we can have an ID.
We can target it with CSS, style it nicely.
But inside this div, that's where I want to display all of our results.
So that's another reason why I want the ID there, because I want to target it with JavaScript.
Then, just to make our lives easier, why don't we just have an anchor tag and then that can just
ref, um, you know, our index.html file.
Very, very simple.
And we can say "Back to form".
Okay.
How's that?
And that's all I want in our HTML.
But we need JavaScript, right?
We need JavaScript.
We need to target that div,
we then need to access the URLSearchParams,
and then we need to display all of our results.
So the first thing I want to do is I want to define our resultsList [variable], the place where we want to put
all of our results.
And like I mentioned, I want to target that div with JavaScript - getElementById(), and the ID we're
going to target is results.
And now this is where we're going to be using the URLSearchParams.
In order to use it, we need to use JavaScript's `new` keyword, and URLSearchParams.
We don't have to write this method ourselves.
This is purely straight out of the box given to us by the browser.
It takes one argument, and that is the URL parameter itself.
Because we know when we submit our form with a GET request, everything is going to be appended in the
URL.
So how do we get to that entire query string?
What is the king ðŸ‘‘ of everything on a web page?
If you've done my DOM courses, you'll know it is the window object.
And on the window object, we've got another property called location.
And on that we want to get what's in the search bar, the parameters within that search bar.
There we go.
So that's pretty much it.
But now remember what I said ...
we usually use the forEach method or the for...of method to iterate through each one.
Here I'm just going to use forEach.
And it's very very simple.
We're going to take its value and name,
and I'm going to be using the arrow syntax
and here we go.
We can literally display the entire results.
So I want to grab our resultsList that we defined above,
and I want to append the values.
And I'm going to use template literals.
If you don't know what these are, please check out my JavaScript course.
Right.
And we've got variables in here.
We've got the name variable, and you guessed it we've got the value variable.
There we go.
And the other thing I want to do then is, because that's just going to display it all in one line, I
want to have a break.
So let's get our resultsList, append,
and here I'm going to access our document.
And now I want to create an element.
And the element I want to create is a "br" - a break.
How cool is this?
Now, in our index file, all we need to do is define an action.
And of course we want to go to the results.html page.
Does that make sense?
Let's save this.
Let's go to our browser.
Let's type "Wally", submit.
How awesome is this?
Man, I have a lot of fun doing this.
I hope you do too.
And don't take what you've learned for granted.
You really are learning a lot.
And yeah, I thought this would just be a good place for us to stop, and for me to show you how to extract
information from the query string and display it to a screen.
And as you just seen, we used the URLSearchParams interface.
And it's a very simple interface.
It takes one argument and that argument is the URL search parameter itself.
Basically all the name:value pairs that are submitted along with the form.
And then we just loop through each name:value pair,
right Wally,
let's submit.
And then each name and value pair is displayed to the screen.
We created an empty div tag.
And then we just put all our content within that div tag.
Very very simple, but very very cool.
Anyways, that's enough for this topic, so let's move on.