1
00:00:00,300 --> 00:00:05,820
All right, so I know I kind of tricked you on this one in this lesson, because XIKAR and Fetch are

2
00:00:05,820 --> 00:00:09,960
a little bit longer and this is the third part of this lesson.

3
00:00:10,200 --> 00:00:12,810
And in this lesson, we're going to focus on the challenge.

4
00:00:13,170 --> 00:00:20,790
So the objective of this challenge is to get data from Jason Placeholder type of code Dotcom forgot

5
00:00:20,790 --> 00:00:24,510
to do is so essentially it's a to do list on this website.

6
00:00:24,510 --> 00:00:30,870
So it's an API and create elements that are agreed for completed and read for ones that are not completed

7
00:00:30,870 --> 00:00:36,060
items and list them all out so you can use fetch and you could also use the chart as well.

8
00:00:36,650 --> 00:00:39,300
So it's up to you and do it either way.

9
00:00:39,300 --> 00:00:39,840
That works.

10
00:00:40,050 --> 00:00:47,190
So when you come into the Web page, make sure that you get the URL correct and then load the JSON.

11
00:00:47,340 --> 00:00:53,750
And within the logic side, you can make your request to the URL and output the response information.

12
00:00:53,760 --> 00:00:59,370
So returning back that response information and JSON formatted so you can use response JSON and then

13
00:00:59,370 --> 00:01:05,790
output it and then make use of it within your JavaScript where you loop through the data and then update

14
00:01:05,790 --> 00:01:13,650
depending on what the data value is, you can set the div stellar color to green or red depending on

15
00:01:13,650 --> 00:01:16,980
what the value of the bullet value is of the task.

16
00:01:17,310 --> 00:01:20,800
So go ahead and try this one out, a composite video and I'll walk you through the solution.

17
00:01:20,940 --> 00:01:27,630
So I've got the URL here, and usually when I do use these APIs, I usually go to the URL and just make

18
00:01:27,630 --> 00:01:30,810
sure that it is working if it's working in your browser.

19
00:01:30,840 --> 00:01:32,070
Chances are it should work.

20
00:01:32,070 --> 00:01:33,730
No problem with your code.

21
00:01:34,350 --> 00:01:42,890
So again, I am using the life preview in brackets, so that's giving the ability to have HTTP address.

22
00:01:43,380 --> 00:01:47,780
So some of these APIs, they're going to be restricted if you're using the file protocol.

23
00:01:47,910 --> 00:01:55,080
So make sure that you are on the HTP protocol before you try this and you can use various editors such

24
00:01:55,080 --> 00:01:56,760
as Brackett's in order to accomplish that.

25
00:01:56,770 --> 00:02:02,130
So you go to Live and Live Preview or you can just click the little link here at the Little Lightning

26
00:02:02,130 --> 00:02:02,410
Bolt.

27
00:02:03,030 --> 00:02:05,910
So also, let's select our output area.

28
00:02:05,910 --> 00:02:12,840
And this is going to be that div element that we have on the page, the document and query selector

29
00:02:12,930 --> 00:02:17,100
selecting the development so that we have some more we can output our output.

30
00:02:17,400 --> 00:02:19,020
And you could call this function whatever you want.

31
00:02:19,890 --> 00:02:22,110
So this is a function that's just going to get invoked.

32
00:02:23,010 --> 00:02:25,310
No parameters being passed into the function.

33
00:02:26,010 --> 00:02:32,790
And this is where we've got our futch, where we're fetching to the URL that we provided and then using

34
00:02:32,790 --> 00:02:39,010
then to get the response data and then that response data.

35
00:02:39,030 --> 00:02:41,490
This is going to be returned as JSON.

36
00:02:41,790 --> 00:02:44,750
So we're doing response JSON and then another then.

37
00:02:44,760 --> 00:02:48,460
So this promise and this is where we can make use of the data that's coming in.

38
00:02:49,170 --> 00:02:54,960
So using the data value, first of all, I put it into the console so that we can make sure that everything

39
00:02:54,960 --> 00:02:56,020
is working properly.

40
00:02:56,040 --> 00:03:02,130
So, see, we're putting all of this information into the console, so got all this user information.

41
00:03:02,130 --> 00:03:04,920
So we've got a nice full list here that we can use.

42
00:03:05,100 --> 00:03:07,230
And there's a lot of stuff that's coming in through this API.

43
00:03:07,410 --> 00:03:11,160
The next thing that we want to do, since we've got the data, we've made sure that we did get the data

44
00:03:11,160 --> 00:03:11,600
properly.

45
00:03:12,090 --> 00:03:13,470
Let's create our loop.

46
00:03:13,830 --> 00:03:20,110
So using just a regular for loop, we've got X while X is less than data length.

47
00:03:20,130 --> 00:03:22,480
So this API is different than the other one.

48
00:03:22,500 --> 00:03:23,370
It didn't have results.

49
00:03:23,700 --> 00:03:26,850
So these have to be careful because all these APIs are going to be different.

50
00:03:27,090 --> 00:03:28,230
They're going to be structured different.

51
00:03:28,440 --> 00:03:30,480
We're going to create a div object.

52
00:03:30,870 --> 00:03:35,970
So document and this is what we're going to put the output and it's also going to give us an option

53
00:03:35,970 --> 00:03:37,320
to style that output.

54
00:03:37,710 --> 00:03:40,080
So create element, an element that we're creating.

55
00:03:40,080 --> 00:03:42,960
It's div that we're going to create and then now we've got a condition.

56
00:03:42,970 --> 00:03:48,240
So all of this data that's being outputted, you can see that there's a bunch of values here within

57
00:03:48,240 --> 00:03:48,650
the data.

58
00:03:48,900 --> 00:03:53,190
So we look at the user, we see that completed is a boolean value.

59
00:03:53,580 --> 00:04:01,620
So we can use that and have a condition to check to see if data because this is Boulin, we can check

60
00:04:01,620 --> 00:04:08,610
to see if it is completed and then we can set the div style color to green or we can set it to read.

61
00:04:08,940 --> 00:04:15,750
And we can also do this in another format as well, where we've got the div style using a territory

62
00:04:15,750 --> 00:04:16,350
operator.

63
00:04:16,560 --> 00:04:22,260
So setting the div style color and then checking to see if this value is true.

64
00:04:22,500 --> 00:04:29,560
And if it is, then what we do is we set that to otherwise it's going to get set to red.

65
00:04:29,730 --> 00:04:33,590
And also we want to update the inner text content of that element.

66
00:04:33,600 --> 00:04:38,340
And I just put it out there and data X again and title.

67
00:04:39,180 --> 00:04:46,230
So we get all of that information into the element and next we use output append child and we're going

68
00:04:46,230 --> 00:04:49,970
to pen those lives that were created to see what that looks like.

69
00:04:50,760 --> 00:04:55,910
This has got our full list and it looks like the first ones that are coming in.

70
00:04:56,790 --> 00:04:58,380
So we got quite a bit of data here.

71
00:04:58,860 --> 00:04:59,790
So the first ones that are.

72
00:05:00,140 --> 00:05:06,860
And so they're completely false, and when we get to number four or with the idea for this one is completely

73
00:05:06,890 --> 00:05:07,160
true.

74
00:05:07,430 --> 00:05:12,550
So we're able to output all of that data and make use of it within our JavaScript code.

75
00:05:12,830 --> 00:05:15,630
So do something with the data that's coming in and when you refresh it.

76
00:05:15,920 --> 00:05:17,360
So this list is staying the same.

77
00:05:17,570 --> 00:05:19,710
So it's not changing like the other apps.

78
00:05:20,480 --> 00:05:22,580
So all of this content coming in is staying the same.

79
00:05:23,060 --> 00:05:27,980
So go ahead and try this one out, have some fun with it as there's a lot you can do with that.