We now have our HDTV endpoint which sends back the Jason forecast information as we saw.
This works well for valid addresses and in the last video we set it up to also work with invalid addresses.
Now in this video we're going to turn our attention towards our front end once again.
The goal is to figure out how to make an H TTP request for that forecast data from client side JavaScript
in the browser that's going to allow us to create a form submit it fetch the data and then on the fly
read render the page to show that weather information over in Visual Studio code.
Let's go ahead and start by closing all open files and I'm going to collapse the playground folder and
I'm also going to collapse the source directory in web server.
We're going to spend our time in the public folder a little bit and in the templates folder a little
as well.
Now the home page of our site this is the only page where we're actually going to fetch the forecast
the other pages aren't going to have that and you would just go to the weather page to actually get
weather information.
Now that is the index dot HB s view.
And then here you'll remember we linked in the javascript file that is in the J.S. folder called app
dot J S now out of our four views.
That's the only one that has it.
The other three files for all four about and help.
They don't link it in and that's intentional.
The code that goes inside of here is going to be related to fetching the forecast and since this is
the only page that needs to fetch the forecast it's the only page that needs this code.
Now we're going to move over into our javascript directory.
We have app dot J.
S This is client side JavaScript which is going to run in the browser.
The goal inside of here amongst other things is to be able to fetch the forecast information in this
video we're not going to worry about actually creating the form or rendering the forecast data to the
browser.
We're going to focus on just getting the data inside of our client side JavaScript.
Once we have it inside of the client side JavaScript the rest is pretty easy now to actually make the
TTP request from client side JavaScript.
We'll be using the very popular fetch API that is not part of JavaScript.
It is a browser based API which means it's something we can use in all modern browsers but it's not
accessible in node j s so the code we write inside of here isn't going to be something you'll be able
to use in a back end node script here.
This script is running in client side JavaScript so using the fetch API is perfectly fine.
We're gonna explore the fetch API by working with a dummy adjacent endpoint.
I used in a different class then as your challenge for the video you'll actually fetch this Jason data
in the client side JavaScript file.
Now the other API which we're going to start with you can find at puzzle dot Meade dot I O forward slash
puzzle.
This is a very simple API.
It sends back a Jason response.
We have a single property puzzle and we have a word puzzle in my javascript bootcamp class.
This was used to create a hangman game.
If you make the request again you get a different puzzle each time handmade gifts perfectly pressed
uniform coffee beans.
So our goal is to figure out how to get this data in the client side JavaScript file.
Then you'll use what we've learned to get this data in the client side JavaScript file.
Now Fetch is a function so we're going to call it as such and we pass to it a string.
This is the you are all we're trying to fetch from now for the puzzle API.
That would be HDTV colon forward slash forward slash puzzle.
Dot need dot I O forward slash puzzle.
This is going to give us back a randomly generated puzzle now calling fetch in our client side java
script is going to kick off an asynchronous I O operation much like calling a request in node j s did
that means we don't have access to the data right away.
Instead we provide a function and that function will run at some point in the future when the data is
available.
Now with the request function in node we passed a callback as the second argument to the function with
the fetch API.
It's actually slightly different.
Instead we use the then method on the return value from fetch and we provide to it the callback function.
We want to run and we get access to the response as the first and only argument up above.
Then inside of here we can use the response to do whatever we want to do like extract the data and render
it to the browser or just dump it to the console.
So right here we're saying fetch data from this U.R.L. and then run this function.
Now the.
Then method is part of a much bigger API we'll be exploring later in the class known as promises.
We're going to explore promises and its companion async await in detail in just a couple of sections.
When we learn how to connect no JSA to a database for the moment we're not going to worry about diving
into the details of promises or async await.
But don't worry you'll use both extensively in the second half of the class.
So right here we have access to the response and the goal is to just get the data to get that string
puzzle and do something simple with it like render it to the browser or dump it to the console.
We have access to that on response it is response dot Jason which we're going to call as a function
since it is one we don't pass any arguments to it.
And this is also designed to work with them.
So I'm going to add on a call to then and I'm going to pass in a callback function.
This function is going to run when the Jason data has arrived and been passed.
Right here we have access to the past data.
So a javascript object as the first and only argument passed in.
I'm gonna call that data and down below we can actually use it.
So that would be console dot log data to dump that console to the terminal.
Later on we'll be using different methods for the browser to actually render data like the location
and the forecast to the user interface that the user seats.
What I'm going to do is go ahead and save apt J.
S and then inside of the browser I'm gonna crack open the Chrome developer tools which we have used
before in the menu.
It is more tools developer tools and once again we're looking for the console tab.
And here we have our one message we print online one of the file client side JavaScript file is loaded.
We're not seeing our second message since we haven't refreshed the page but if I do we are gonna see
down below.
When the page loads we now have two things showing up.
I have one my message from before and to an object with a puzzle property and this puzzle is bags of
fertilizer.
Now this is the exact same structure we saw when we cracked open the end point in the browser and viewed
the Jason over here.
So using those few lines of code in Visual Studio code we were able to fetch Jason data from a U.R.L.
pass it into a javascript object and then do something with it.
In this case just dumping it to the console.
Now it's challenge time and it's going to be up to you to use fetch once again instead of fetching a
puzzle you're gonna use fetch to fetch forecast information from the you are all that we've set up.
Now once again for the moment.
Don't worry about creating a form or actually rendering the forecast to the browser.
That's something we'll start on in the very next video.
For now the goal is the following just to fetch the weather.
So step one in this file down below the comments you're going to set up a call to fetch to fetch the
weather data for Boston so you can get the correct you are all set up and passed into fetch.
Then once you have the results you are going to pass the Jason like we did up above and this is where
you're going to do one of two things.
If the Jason response has that error property you're going to print the error to the console.
If there is no error then you're going to print the location and the forecast to the console.
And finally you're going to go ahead and test your work.
Down below you'll refresh the browser to do that.
Try once with Boston.
Make sure you see the location and the forecast then go ahead and try again with something like an exclamation
mark and make sure you see the error showing up.
Take some time to knock that out test your work and when you're done come back and click play
how'd that go.
Let's go ahead and kick things off by setting up our call to fetch.
So right here I am going to call fetch passing in a string.
You are L and I can grab that from the browser where I already have it.
In this case I'm getting the weather for Philadelphia.
The challenge was to get it for Boston though quite honestly any location would work just fine.
So I can take this U.R.L. and I can bring this over to visual studio code.
I'm gonna paste it right inside of here and now we have our you are all set up and from here we're going
to use then to set up our callback function once again.
So dot then we provide the function to run when Fetch is all done.
And in this case we know we get access to the response.
Next up we're gonna go ahead and use the Jason method on a response.
So that's response Dot.
Jason.
We also use then with this.
And what do we get back.
We know we get back that past data so I'll set up a another callback function for when that operation
is done and I'll get access to the data right here.
But you could have called this particular parameter anything you liked.
Next up we want to use a little conditional logic to check if things went right or if things went wrong.
Right here.
What I'm gonna do is check if there is an error.
So if data dot error then we're going to do one thing print the error message.
Otherwise in the else clause we'll do the other thing print the location and the forecast.
So right here let's knock that out console log data dot error then down below we'll have two logs for
those two values in the next video we'll transition these logs from logging to the console to rendering
to paragraphs in the browser.
So right here I'll use log to go ahead and dump data dot location then I'll dump the forecast just down
below Excellent.
Now that we have this in place the last thing to do is to test our work with a working example and a
not a working example.
We already have Boston inside of there.
So let's go ahead and test that on the home page of our weather Web site.
I'll refresh the page and I do indeed get my forecast information showing up which is fantastic.
Now that we have it it's gonna be really easy to render it to the browser.
Next up let's make sure that when things go wrong our code knows how to respond.
So I'll swap the address out for an exclamation mark.
I'll refresh the browser once again and this time around I can see unable to find location.
Try another search Prince.
And this is something we're also going to show to the browser if it actually occurs.
We want to provide our users with the most useful information possible so they know what exactly is
going on and why.
All right.
That is it for this video.
In this video we explored the fetch API which is really the only time we're going to use it sends it
is client side JavaScript and the bulk of this course is server side JavaScript with node.
Now fetch allows us to fetch data from a U.R.L. and do something with it while we used that.
We also touched on the idea of something called Promises.
We don't need to know anything about them for the moment.
Remember they are covered in detail shortly in the class up above.
I'm going to go ahead and remove the challenge comments and I'm also going to remove the other fetch
call which fetched the puzzle.
We just use that to explore how the API works.
Now that we have the forecast information in client side JavaScript in the next video we're actually
going to create a form.
And we're going to get this information rendered in the browser as opposed to having it dumped in the
developer tools console.
I'm excited to get to that.
So let's go ahead and jump right in to the next one.