1
00:00:00,720 --> 00:00:04,780
Now we're going to look at JavaScript, and the first that we want to do is load the content.

2
00:00:05,040 --> 00:00:08,580
So as mentioned in the earlier lesson, I do have an end point that I've set up.

3
00:00:08,700 --> 00:00:12,930
And this is actually going to be a custom one that's going to list out all of my course content.

4
00:00:13,170 --> 00:00:20,310
So the data within the data object, it's got a number of posts and then the posts contain each different

5
00:00:20,850 --> 00:00:23,820
information about courses and so on.

6
00:00:23,910 --> 00:00:28,220
And then also within the main level, there's the pages.

7
00:00:28,230 --> 00:00:33,870
And if there's a previous page at all listed here and also list out the next page so that I have a way

8
00:00:33,870 --> 00:00:39,030
to move through the various pages of content and I'm going to load them chunk by chunk, so I'll do

9
00:00:39,030 --> 00:00:42,560
it page by page and this will vary per API.

10
00:00:42,870 --> 00:00:45,880
So first thing we want to do is set up the euro.

11
00:00:45,900 --> 00:00:51,840
So that's not going to change and I'm going to set it up as a variable called just neutral.

12
00:00:52,290 --> 00:00:54,650
And I'll make this a little bit smaller so you can see it.

13
00:00:54,780 --> 00:00:59,730
I know this is a fairly long you URL and this is coming from an apps script, so you can use the same

14
00:00:59,730 --> 00:01:00,570
one that I'm using.

15
00:01:00,900 --> 00:01:07,860
And if you go out into your browser and paste it, you're going to find that you get status.

16
00:01:07,860 --> 00:01:12,740
But the data is false because there's no data that's being returned because we haven't specified API.

17
00:01:13,020 --> 00:01:18,540
And that's one of the parameters that this particular API is looking for, is that it's looking for

18
00:01:18,540 --> 00:01:19,160
a value.

19
00:01:19,560 --> 00:01:24,090
So let's create that and we'll get create an object that's just going to be called Val.

20
00:01:24,300 --> 00:01:30,210
And then this is what we're going to be updating in the various functions as we move through the various

21
00:01:30,210 --> 00:01:33,350
pages that are available within this particular API.

22
00:01:33,690 --> 00:01:40,170
So we want to set up page value and it's going to call it page, and this is going to be our starting

23
00:01:40,170 --> 00:01:41,280
page value.

24
00:01:41,430 --> 00:01:45,270
So we can start at page one because this is actually where the API is going to start.

25
00:01:45,540 --> 00:01:48,510
So the start page is one.

26
00:01:49,020 --> 00:01:57,270
And next we're going to create a function that's going to make the it the Thach request to the URL and

27
00:01:57,270 --> 00:02:02,190
return the content so that we can loop through the content that we can see it within the console.

28
00:02:02,550 --> 00:02:06,260
So let's create a function and we can call it get courses.

29
00:02:06,870 --> 00:02:10,110
And so this will run right off within the route.

30
00:02:10,500 --> 00:02:14,130
And you could also have specific triggers that will load this as needed.

31
00:02:14,280 --> 00:02:20,910
And we're going to be updating this later on that the trigger is going to be loading the course content

32
00:02:21,300 --> 00:02:23,200
whenever we do the scroll.

33
00:02:23,210 --> 00:02:25,980
So that's going to be we're going to be customizing some of the functions.

34
00:02:26,160 --> 00:02:30,330
And that's why it's always good to wrap it within a function, because this is going to make it more

35
00:02:30,330 --> 00:02:30,990
flexible.

36
00:02:31,320 --> 00:02:36,930
So the get courses function and setting up Futch request.

37
00:02:37,230 --> 00:02:43,260
So let's build the base URL for the fetch request and set up that.

38
00:02:43,920 --> 00:02:46,290
And this isn't actually going to change once we set it.

39
00:02:46,620 --> 00:02:49,400
So we'll just call it the base you URL.

40
00:02:49,770 --> 00:02:58,770
It's going to use the value of your URL and then concatenate the questionmark equals and questionnaire

41
00:02:58,860 --> 00:03:04,350
page equals and then whatever the page value is that we want to load and that's connected within the

42
00:03:04,350 --> 00:03:06,090
val object under page.

43
00:03:06,480 --> 00:03:12,240
So that will provide us a base you url that we can work with and that's we're going to create the Futch

44
00:03:12,240 --> 00:03:12,870
request.

45
00:03:13,170 --> 00:03:16,280
So we're using fetch instead of the actual requests.

46
00:03:16,440 --> 00:03:19,070
You can also do this with the actual request, of course.

47
00:03:19,530 --> 00:03:22,770
So using fetch and this is promise based.

48
00:03:23,130 --> 00:03:28,050
So we're returning back our response value on this promise.

49
00:03:28,230 --> 00:03:30,090
So returning back a response.

50
00:03:30,600 --> 00:03:34,620
And when we do get the response, we're going to use the Jaeson.

51
00:03:35,160 --> 00:03:36,750
The response, Jason.

52
00:03:37,920 --> 00:03:44,340
And send that to the next promise, and that will be then and now we're going to have it within a usable

53
00:03:44,340 --> 00:03:51,450
format where we've got it as a Jason value that's being returned in a usable format.

54
00:03:52,020 --> 00:03:58,230
And for now, we'll just console log out the contents of Jason to make sure that we've done the connection

55
00:03:58,230 --> 00:04:01,520
properly and that everything is working as expected.

56
00:04:01,800 --> 00:04:05,340
So refresh the page and we're not going to see anything yet within the Web page.

57
00:04:05,550 --> 00:04:09,650
But if we open up the console that's down here at the bottom am using Chrome.

58
00:04:09,660 --> 00:04:12,300
So this is dev tool within Chrome.

59
00:04:12,480 --> 00:04:17,400
And if you're not familiar with the console, you can always open that up within the more tools, developer

60
00:04:17,400 --> 00:04:17,820
tools.

61
00:04:17,970 --> 00:04:20,550
And there's different shortcuts for windows and for Macs.

62
00:04:20,760 --> 00:04:22,650
So as soon we get return back and object.

63
00:04:22,770 --> 00:04:27,930
So this is representing the JSON content and within that object we've got a status of 200.

64
00:04:28,200 --> 00:04:33,080
We've got data of a number of different posts and then we've got the pages.

65
00:04:33,270 --> 00:04:35,160
So we're only looking to get Raque.

66
00:04:35,160 --> 00:04:38,420
The contents that are contained within JSON data object.

67
00:04:38,640 --> 00:04:40,200
So let's do a quick refresh.

68
00:04:40,680 --> 00:04:45,840
And now we see we've got the posts, which is what we're going to look through and the pages are going

69
00:04:45,840 --> 00:04:50,880
to indicate if there's additional content to be loaded and if it is available to load that.

70
00:04:50,880 --> 00:04:55,800
We know that when we're scrolling we can continue to load more content as long as there's a next page.

71
00:04:55,950 --> 00:04:59,550
And if next is null, then we have to stop loading content.

72
00:04:59,760 --> 00:05:01,650
So we have to be mindful of that fact.

73
00:05:02,070 --> 00:05:09,030
So once you set up your Thach request, then you've got access to the data and you can also open it

74
00:05:09,030 --> 00:05:12,510
in the browser just to see that you are getting the data.

75
00:05:12,510 --> 00:05:16,170
And it'll be the same thing that you're returning back within the console.

76
00:05:16,290 --> 00:05:18,180
You can be ready to move on to the next lesson.

77
00:05:18,360 --> 00:05:22,660
We're going to make use of this content and we're going to write it into the webpage.

78
00:05:22,680 --> 00:05:24,390
So that's still to come in the next lesson.