1
00:00:00,330 --> 00:00:05,850
This lesson, we're going to output the content of the data object that's being returned back from the

2
00:00:05,850 --> 00:00:06,630
Futch request.

3
00:00:06,660 --> 00:00:08,180
We're going to write it onto the page.

4
00:00:08,460 --> 00:00:10,160
So let's create a few more variables.

5
00:00:10,220 --> 00:00:16,270
I create a variable called Page that's going to be an object that can hold Arpège Contents and provides

6
00:00:16,310 --> 00:00:19,960
some flexibility if we provide a page container.

7
00:00:20,280 --> 00:00:24,470
And here I'm going to just use a document and create elements.

8
00:00:24,960 --> 00:00:28,080
And the element that I can create is just going to be a regular div.

9
00:00:28,330 --> 00:00:36,180
And this is we're I'm going to dump the page contents and I'm also going to use the page main object

10
00:00:36,450 --> 00:00:37,620
and then document.

11
00:00:37,740 --> 00:00:42,720
And this is we're going to select the main object that we want to post the content to to set off to

12
00:00:42,720 --> 00:00:46,670
actually create one, because I do have that section with the class of container.

13
00:00:47,190 --> 00:00:52,560
So let's use query selector and we're going to select the section object.

14
00:00:53,310 --> 00:00:58,920
And if you do have more than one section, the query selector will select the first one and now we can

15
00:00:58,920 --> 00:01:02,130
use page and here we're going to attend.

16
00:01:02,130 --> 00:01:06,960
And the content that we're going to spend is contained within page container.

17
00:01:07,260 --> 00:01:10,350
And let's give some content into the page container.

18
00:01:10,830 --> 00:01:18,540
So the page container and set up some inner text or enter or text content and I'll set that to be Hello

19
00:01:18,540 --> 00:01:18,870
World.

20
00:01:19,380 --> 00:01:22,800
So we're going to dump in within the page container.

21
00:01:23,220 --> 00:01:26,330
We're going to attend it with the contents of Hello World.

22
00:01:26,580 --> 00:01:32,230
So it looks like we're ready and we've got this page container that we can write content into.

23
00:01:33,210 --> 00:01:38,250
So next, let's create a function in order to handle that and I'll just create the function of up here.

24
00:01:38,580 --> 00:01:43,300
And what this function is going to do is this is the one that's actually going to render the posts so

25
00:01:43,300 --> 00:01:48,990
we could call it render posts and that needs some data that's going to loop through and render the post.

26
00:01:49,200 --> 00:01:53,790
It's going to be expecting an array object so that we've got the data.

27
00:01:54,880 --> 00:02:02,020
And using for each we're going to loop through the contents of it and each one of these is going to

28
00:02:02,020 --> 00:02:08,010
be a post and then here, just as we did before, we're going to create a temporary div.

29
00:02:08,710 --> 00:02:17,200
So using the document to create elements and creating a div, this is going to be the the main container

30
00:02:17,200 --> 00:02:18,290
for each one of the posts.

31
00:02:18,550 --> 00:02:23,410
So as we loop through the posts, we're going to output the device and we see that we've got a number

32
00:02:23,410 --> 00:02:24,280
of posts there.

33
00:02:24,430 --> 00:02:34,060
So all we're going to have to do is use the render posts and output the content of JSON data and posts

34
00:02:34,060 --> 00:02:35,770
because it's going to be expecting an array.

35
00:02:36,250 --> 00:02:41,560
So we're sending all of that object information into here and now we're rendering out the posts.

36
00:02:41,750 --> 00:02:43,890
So we haven't written anything out yet.

37
00:02:44,410 --> 00:02:50,980
So let's take the div and we're going to use the inner HTML method and I'll update some of the content

38
00:02:50,980 --> 00:02:52,340
that's contained within the post.

39
00:02:52,540 --> 00:02:54,640
Let's take a look at the post structure.

40
00:02:54,850 --> 00:02:56,400
So they are array based.

41
00:02:56,410 --> 00:03:03,250
So each one of them, as we loop through, I've got a title here for within their structure.

42
00:03:03,400 --> 00:03:09,190
So you also might find that it's an object within these types of APIs, but in this particular case,

43
00:03:09,190 --> 00:03:10,880
it's just an array value.

44
00:03:11,140 --> 00:03:13,530
So the post is going to be an array value.

45
00:03:13,840 --> 00:03:15,540
So we'll use the template literal.

46
00:03:16,120 --> 00:03:23,410
So the curly brackets and then the dollar sign post and then whatever index number it is, the value

47
00:03:23,410 --> 00:03:24,420
that we want to output.

48
00:03:24,880 --> 00:03:33,700
So it looks like maybe we should output the contents of it and then taking the page container and then

49
00:03:33,700 --> 00:03:39,880
using the append method, we're going to spend the div to the page and I got the dollar sign on the

50
00:03:39,880 --> 00:03:40,630
wrong side there.

51
00:03:41,080 --> 00:03:45,850
So now we're outputting the content from the API and this is a template literals.

52
00:03:45,850 --> 00:03:46,930
So these are tactics.

53
00:03:46,930 --> 00:03:48,400
They're not actually single quotes.

54
00:03:48,970 --> 00:03:51,050
So make sure that you are pressing the backpack.

55
00:03:51,070 --> 00:03:57,640
And that's beside the one key to the left of the one key on your keyboard or on most keyboards.

56
00:03:58,180 --> 00:04:02,020
It's a template literals and then to call a variable value in.

57
00:04:02,260 --> 00:04:07,090
Then we use the dollar, sign the curly brackets and then whatever the value is that we want to use

58
00:04:07,210 --> 00:04:08,610
from the JavaScript code.

59
00:04:09,160 --> 00:04:14,470
So it looks like we're able to load that content and we're going to add some more structure to this

60
00:04:15,010 --> 00:04:21,220
coming up, as well as add another element at the bottom that's just going to say that there's more

61
00:04:21,220 --> 00:04:22,390
content to be loaded.

62
00:04:22,390 --> 00:04:27,790
So whenever the person scrolls down to the bottom, they'll see this, that, oh, it's loading at a

63
00:04:27,790 --> 00:04:30,630
load, more content into the bottom part there.

64
00:04:30,640 --> 00:04:35,160
So that's coming up next are quite a few things that we need to still do in the upcoming lessons.

65
00:04:35,380 --> 00:04:41,830
So go ahead, connect to the API, render the content from the API or to your Web page and be ready

66
00:04:41,830 --> 00:04:43,240
to move on to the next lesson.