1 00:00:00,750 --> 00:00:06,600 Hey, there, fetch is the new way to make requests, so it is also going to seem familiar to those 2 00:00:06,600 --> 00:00:13,890 that have used XML HTP requests like in the last lesson, but it provides a new API and it's more powerful 3 00:00:13,890 --> 00:00:18,210 and flexible because it's relying on promises as more information. 4 00:00:18,210 --> 00:00:19,980 Of course, Mozilla Developer Network. 5 00:00:20,020 --> 00:00:25,440 So if you want to read up on that and essentially there's some more options where you can set headers 6 00:00:25,440 --> 00:00:26,940 and requests response. 7 00:00:27,180 --> 00:00:33,450 And there's a bunch of built in methods as well that when you're returning that content, you can pass 8 00:00:33,450 --> 00:00:38,010 it out as Jason so you can take the response as JSON and then utilize it. 9 00:00:38,010 --> 00:00:43,110 Because most of the time, let's be honest, most of these APIs are JSON and they're responding in JSON 10 00:00:43,110 --> 00:00:43,510 format. 11 00:00:43,770 --> 00:00:47,880 So let me show you how this works and we're going to use that same URL that we used before. 12 00:00:48,390 --> 00:00:53,250 And in this case, we're also going to set up a button so that our JavaScript button is going to do 13 00:00:53,250 --> 00:00:53,760 something. 14 00:00:53,770 --> 00:01:00,330 So selecting that document, using query selector, selecting the button element or the element, that 15 00:01:00,330 --> 00:01:03,770 is a button on the page, the first one adding an event listener. 16 00:01:04,080 --> 00:01:05,340 So add event listener. 17 00:01:05,850 --> 00:01:12,710 And the fact that we're listening for is a click and whenever we are clicking, we're going to get a 18 00:01:12,720 --> 00:01:13,340 joke. 19 00:01:14,110 --> 00:01:15,810 That's going to be the function that's going to run. 20 00:01:15,840 --> 00:01:16,910 So let's set that one up. 21 00:01:17,220 --> 00:01:24,500 So function and this time we're going to use fetch and fetch is going to be a lot cleaner than our object. 22 00:01:24,840 --> 00:01:29,020 So we specify the URL that we're fetching and this is promise based. 23 00:01:29,030 --> 00:01:35,910 So once it retrieves the euro, we can use a function in order to get the response content back. 24 00:01:36,540 --> 00:01:44,520 And because it's going to be in a JSON format, we can then take that response content and return it 25 00:01:44,520 --> 00:01:52,320 back in an object format from JSON and then adding in another promise so we can change as many promises 26 00:01:52,320 --> 00:01:52,980 as we want. 27 00:01:53,640 --> 00:01:59,280 So now the function and we've got data coming and what we can do with that data for now will output 28 00:01:59,280 --> 00:02:00,060 into the console. 29 00:02:00,060 --> 00:02:02,460 So we can see that that's a very basic fetch. 30 00:02:02,460 --> 00:02:07,590 And whenever we click the button, you see we get a joke coming in and it's already within an object 31 00:02:07,590 --> 00:02:08,130 format. 32 00:02:08,310 --> 00:02:11,380 So this was going to make it really easy to update any of the content. 33 00:02:11,610 --> 00:02:19,080 So, for instance, if we want to select our document and query selector selecting that one div that 34 00:02:19,080 --> 00:02:23,330 we have on the page, we can update the text content. 35 00:02:23,850 --> 00:02:29,930 And in this case we've got all of that object within data and it's outputting it as a value. 36 00:02:30,030 --> 00:02:35,430 So whenever we click the button, we're going to update and we're going to have a new joke being presented 37 00:02:35,430 --> 00:02:36,150 within that. 38 00:02:37,370 --> 00:02:42,800 If it's as easy as that, it does look a lot cleaner and of course, there's quite a bit more you can 39 00:02:42,800 --> 00:02:43,760 do with fetch as well. 40 00:02:44,090 --> 00:02:50,590 And both with objects as well as fetch, you can retrieve multiple results if you want. 41 00:02:50,930 --> 00:02:54,500 So I'll show you another API where we can get back more than just the one result. 42 00:02:54,860 --> 00:02:58,970 Sappi is located random user Emmy for its API. 43 00:02:59,120 --> 00:03:01,520 And as you can see at first we only get the one. 44 00:03:01,730 --> 00:03:07,010 These are randomly generated users and user information, but we can get more than one result. 45 00:03:07,010 --> 00:03:09,890 If we want 50 results, we can return back. 46 00:03:10,610 --> 00:03:11,850 So there should be results. 47 00:03:12,380 --> 00:03:17,000 So if you wanted 50 results, we can return back 50 results within an array format. 48 00:03:17,240 --> 00:03:22,910 And that means that we can iterate through it with JavaScript and then output the contents in our visible 49 00:03:22,910 --> 00:03:23,270 area. 50 00:03:23,300 --> 00:03:24,050 So let's try that. 51 00:03:24,270 --> 00:03:28,930 So instead of get choked, it'll be get users and update some of this. 52 00:03:28,940 --> 00:03:31,590 We'll keep that input as as before. 53 00:03:32,270 --> 00:03:38,150 Also, we can create an input to get any number of users that we want because this is one of the parameters 54 00:03:38,150 --> 00:03:39,100 in the API. 55 00:03:39,500 --> 00:03:41,720 So let's let's construct that element. 56 00:03:41,840 --> 00:03:47,140 So this is going to be our input element and document Crete's element. 57 00:03:47,810 --> 00:03:55,920 So creating that input element and then we're taking elements and we're setting an attribute to it. 58 00:03:55,970 --> 00:03:58,130 So this is going to be a regular text. 59 00:03:58,400 --> 00:04:03,930 So it gives us our input area so we can get the value anytime we want and use that within the formula. 60 00:04:04,160 --> 00:04:08,120 So we've got to get users and we can update the users. 61 00:04:08,660 --> 00:04:14,660 So this URL, let's add that and we're going to use the euro, but we're going to set a temporary one 62 00:04:14,750 --> 00:04:23,210 so that temp and using the value of your URL, add the parameters where we've got our regular Eurail 63 00:04:23,390 --> 00:04:26,300 and we wanted to add in the results and make this dynamic. 64 00:04:26,930 --> 00:04:30,190 So using single quotes there, so can do results 50. 65 00:04:30,560 --> 00:04:34,130 But in this case, what we want to do is we want to make this a dynamic number. 66 00:04:34,490 --> 00:04:36,980 So we're taking the element value and we're going to add it to there. 67 00:04:37,430 --> 00:04:39,440 So responses coming back as JSON. 68 00:04:39,440 --> 00:04:39,920 So that's fine. 69 00:04:39,920 --> 00:04:42,490 We can leave that and it's coming in as data. 70 00:04:42,500 --> 00:04:44,300 So I'm going to comment this out for a second. 71 00:04:44,690 --> 00:04:48,950 And before we try that, let's just update this to be number because we are expecting a number. 72 00:04:49,130 --> 00:04:53,300 And then this isn't just your URL, it's going to be temp so that we have that new parameter that's 73 00:04:53,300 --> 00:04:53,900 added in there. 74 00:04:54,050 --> 00:04:57,570 So starting out and we get an array with different results. 75 00:04:57,590 --> 00:04:58,750 So 50 results there. 76 00:04:59,420 --> 00:05:02,260 And if we only want to see the results, we can do data results. 77 00:05:02,870 --> 00:05:03,650 So refresh. 78 00:05:05,000 --> 00:05:11,870 And we need to specify a number, let's set a default there as well, so set attribute and we'll set 79 00:05:11,870 --> 00:05:14,570 a default value so don't always have to keep adding it. 80 00:05:15,780 --> 00:05:17,520 And in this case, let's do five. 81 00:05:18,500 --> 00:05:22,550 So whenever I click the button, we get five different ones. 82 00:05:22,550 --> 00:05:24,820 Or if we want 50, we can get 50 results. 83 00:05:25,220 --> 00:05:27,530 So they all come back within an array format. 84 00:05:27,800 --> 00:05:31,020 So that means that we can loop through them and output the content as needed. 85 00:05:31,490 --> 00:05:32,660 So let's do that as well. 86 00:05:33,110 --> 00:05:41,870 Also, I wanted to select that element, that output element and Avidan within that output div so we 87 00:05:41,870 --> 00:05:46,520 can make better use of it within the code and as we loop through. 88 00:05:46,520 --> 00:05:48,020 So let's create our loop. 89 00:05:48,020 --> 00:05:51,350 So let X equals zero and loop through. 90 00:05:51,620 --> 00:05:56,960 While X is less than data results, we've got to include that results length. 91 00:05:57,260 --> 00:06:02,780 So the length of that array and then increment X by one and then all the magic is going to happen in 92 00:06:02,780 --> 00:06:03,110 here. 93 00:06:03,290 --> 00:06:08,200 And what we're going to do is we're going to continue to add to the output element div. 94 00:06:08,750 --> 00:06:14,480 So just declare that and that can be blank for now and then we can add to it so and then getting the 95 00:06:14,490 --> 00:06:23,900 data results X and then using that object, we can go to name first and I'll output the data results 96 00:06:23,900 --> 00:06:26,350 object into the console so that we can see that as well. 97 00:06:26,930 --> 00:06:32,990 And this is really helpful when you do this so that you can actually see the object and you can break 98 00:06:32,990 --> 00:06:34,240 apart the object as needed. 99 00:06:35,240 --> 00:06:41,330 So to see within the console, we get all of that information and I want to dig into the name and get 100 00:06:41,330 --> 00:06:42,950 the first name and last name. 101 00:06:43,340 --> 00:06:49,180 So adding in the that's the first thing and then also adding the last name. 102 00:06:50,120 --> 00:06:56,450 So the HTML object now contains all the information that we need and we can take output and we can take 103 00:06:56,450 --> 00:07:01,700 output and set the inner HTML of output to wherever the value of HTML is. 104 00:07:02,090 --> 00:07:06,290 And I'm going to just simply I'm going to add a line break here so that we can distinguish between them. 105 00:07:06,740 --> 00:07:07,820 So let's see what happens. 106 00:07:07,820 --> 00:07:13,460 And when we press the button, you see we always get five different results and this is all coming from 107 00:07:13,460 --> 00:07:14,030 the API. 108 00:07:14,030 --> 00:07:15,080 So this is all dynamic. 109 00:07:15,320 --> 00:07:20,650 And then, of course, we can utilize any of this information that's contained within the response value. 110 00:07:21,050 --> 00:07:22,870 So that's how you can get multiple results. 111 00:07:22,880 --> 00:07:25,320 And if we want 50, we can get 50 as well. 112 00:07:25,370 --> 00:07:26,630 So do try this out. 113 00:07:26,840 --> 00:07:29,930 And coming up, we've got a challenge as well for the section.