Now we're going to look at JavaScript, and the first that we want to do is load the content.
So as mentioned in the earlier lesson, I do have an end point that I've set up.
And this is actually going to be a custom one that's going to list out all of my course content.
So the data within the data object, it's got a number of posts and then the posts contain each different
information about courses and so on.
And then also within the main level, there's the pages.
And if there's a previous page at all listed here and also list out the next page so that I have a way
to move through the various pages of content and I'm going to load them chunk by chunk, so I'll do
it page by page and this will vary per API.
So first thing we want to do is set up the euro.
So that's not going to change and I'm going to set it up as a variable called just neutral.
And I'll make this a little bit smaller so you can see it.
I know this is a fairly long you URL and this is coming from an apps script, so you can use the same
one that I'm using.
And if you go out into your browser and paste it, you're going to find that you get status.
But the data is false because there's no data that's being returned because we haven't specified API.
And that's one of the parameters that this particular API is looking for, is that it's looking for
a value.
So let's create that and we'll get create an object that's just going to be called Val.
And then this is what we're going to be updating in the various functions as we move through the various
pages that are available within this particular API.
So we want to set up page value and it's going to call it page, and this is going to be our starting
page value.
So we can start at page one because this is actually where the API is going to start.
So the start page is one.
And next we're going to create a function that's going to make the it the Thach request to the URL and
return the content so that we can loop through the content that we can see it within the console.
So let's create a function and we can call it get courses.
And so this will run right off within the route.
And you could also have specific triggers that will load this as needed.
And we're going to be updating this later on that the trigger is going to be loading the course content
whenever we do the scroll.
So that's going to be we're going to be customizing some of the functions.
And that's why it's always good to wrap it within a function, because this is going to make it more
flexible.
So the get courses function and setting up Futch request.
So let's build the base URL for the fetch request and set up that.
And this isn't actually going to change once we set it.
So we'll just call it the base you URL.
It's going to use the value of your URL and then concatenate the questionmark equals and questionnaire
page equals and then whatever the page value is that we want to load and that's connected within the
val object under page.
So that will provide us a base you url that we can work with and that's we're going to create the Futch
request.
So we're using fetch instead of the actual requests.
You can also do this with the actual request, of course.
So using fetch and this is promise based.
So we're returning back our response value on this promise.
So returning back a response.
And when we do get the response, we're going to use the Jaeson.
The response, Jason.
And send that to the next promise, and that will be then and now we're going to have it within a usable
format where we've got it as a Jason value that's being returned in a usable format.
And for now, we'll just console log out the contents of Jason to make sure that we've done the connection
properly and that everything is working as expected.
So refresh the page and we're not going to see anything yet within the Web page.
But if we open up the console that's down here at the bottom am using Chrome.
So this is dev tool within Chrome.
And if you're not familiar with the console, you can always open that up within the more tools, developer
tools.
And there's different shortcuts for windows and for Macs.
So as soon we get return back and object.
So this is representing the JSON content and within that object we've got a status of 200.
We've got data of a number of different posts and then we've got the pages.
So we're only looking to get Raque.
The contents that are contained within JSON data object.
So let's do a quick refresh.
And now we see we've got the posts, which is what we're going to look through and the pages are going
to indicate if there's additional content to be loaded and if it is available to load that.
We know that when we're scrolling we can continue to load more content as long as there's a next page.
And if next is null, then we have to stop loading content.
So we have to be mindful of that fact.
So once you set up your Thach request, then you've got access to the data and you can also open it
in the browser just to see that you are getting the data.
And it'll be the same thing that you're returning back within the console.
You can be ready to move on to the next lesson.
We're going to make use of this content and we're going to write it into the webpage.
So that's still to come in the next lesson.