Hey, there, fetch is the new way to make requests, so it is also going to seem familiar to those
that have used XML HTP requests like in the last lesson, but it provides a new API and it's more powerful
and flexible because it's relying on promises as more information.
Of course, Mozilla Developer Network.
So if you want to read up on that and essentially there's some more options where you can set headers
and requests response.
And there's a bunch of built in methods as well that when you're returning that content, you can pass
it out as Jason so you can take the response as JSON and then utilize it.
Because most of the time, let's be honest, most of these APIs are JSON and they're responding in JSON
format.
So let me show you how this works and we're going to use that same URL that we used before.
And in this case, we're also going to set up a button so that our JavaScript button is going to do
something.
So selecting that document, using query selector, selecting the button element or the element, that
is a button on the page, the first one adding an event listener.
So add event listener.
And the fact that we're listening for is a click and whenever we are clicking, we're going to get a
joke.
That's going to be the function that's going to run.
So let's set that one up.
So function and this time we're going to use fetch and fetch is going to be a lot cleaner than our object.
So we specify the URL that we're fetching and this is promise based.
So once it retrieves the euro, we can use a function in order to get the response content back.
And because it's going to be in a JSON format, we can then take that response content and return it
back in an object format from JSON and then adding in another promise so we can change as many promises
as we want.
So now the function and we've got data coming and what we can do with that data for now will output
into the console.
So we can see that that's a very basic fetch.
And whenever we click the button, you see we get a joke coming in and it's already within an object
format.
So this was going to make it really easy to update any of the content.
So, for instance, if we want to select our document and query selector selecting that one div that
we have on the page, we can update the text content.
And in this case we've got all of that object within data and it's outputting it as a value.
So whenever we click the button, we're going to update and we're going to have a new joke being presented
within that.
If it's as easy as that, it does look a lot cleaner and of course, there's quite a bit more you can
do with fetch as well.
And both with objects as well as fetch, you can retrieve multiple results if you want.
So I'll show you another API where we can get back more than just the one result.
Sappi is located random user Emmy for its API.
And as you can see at first we only get the one.
These are randomly generated users and user information, but we can get more than one result.
If we want 50 results, we can return back.
So there should be results.
So if you wanted 50 results, we can return back 50 results within an array format.
And that means that we can iterate through it with JavaScript and then output the contents in our visible
area.
So let's try that.
So instead of get choked, it'll be get users and update some of this.
We'll keep that input as as before.
Also, we can create an input to get any number of users that we want because this is one of the parameters
in the API.
So let's let's construct that element.
So this is going to be our input element and document Crete's element.
So creating that input element and then we're taking elements and we're setting an attribute to it.
So this is going to be a regular text.
So it gives us our input area so we can get the value anytime we want and use that within the formula.
So we've got to get users and we can update the users.
So this URL, let's add that and we're going to use the euro, but we're going to set a temporary one
so that temp and using the value of your URL, add the parameters where we've got our regular Eurail
and we wanted to add in the results and make this dynamic.
So using single quotes there, so can do results 50.
But in this case, what we want to do is we want to make this a dynamic number.
So we're taking the element value and we're going to add it to there.
So responses coming back as JSON.
So that's fine.
We can leave that and it's coming in as data.
So I'm going to comment this out for a second.
And before we try that, let's just update this to be number because we are expecting a number.
And then this isn't just your URL, it's going to be temp so that we have that new parameter that's
added in there.
So starting out and we get an array with different results.
So 50 results there.
And if we only want to see the results, we can do data results.
So refresh.
And we need to specify a number, let's set a default there as well, so set attribute and we'll set
a default value so don't always have to keep adding it.
And in this case, let's do five.
So whenever I click the button, we get five different ones.
Or if we want 50, we can get 50 results.
So they all come back within an array format.
So that means that we can loop through them and output the content as needed.
So let's do that as well.
Also, I wanted to select that element, that output element and Avidan within that output div so we
can make better use of it within the code and as we loop through.
So let's create our loop.
So let X equals zero and loop through.
While X is less than data results, we've got to include that results length.
So the length of that array and then increment X by one and then all the magic is going to happen in
here.
And what we're going to do is we're going to continue to add to the output element div.
So just declare that and that can be blank for now and then we can add to it so and then getting the
data results X and then using that object, we can go to name first and I'll output the data results
object into the console so that we can see that as well.
And this is really helpful when you do this so that you can actually see the object and you can break
apart the object as needed.
So to see within the console, we get all of that information and I want to dig into the name and get
the first name and last name.
So adding in the that's the first thing and then also adding the last name.
So the HTML object now contains all the information that we need and we can take output and we can take
output and set the inner HTML of output to wherever the value of HTML is.
And I'm going to just simply I'm going to add a line break here so that we can distinguish between them.
So let's see what happens.
And when we press the button, you see we always get five different results and this is all coming from
the API.
So this is all dynamic.
And then, of course, we can utilize any of this information that's contained within the response value.
So that's how you can get multiple results.
And if we want 50, we can get 50 as well.
So do try this out.
And coming up, we've got a challenge as well for the section.