Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,340 --> 00:00:05,140 So now that we know about AJAX and API's, 2 2 00:00:05,140 --> 00:00:08,263 let's actually make our first API call. 3 3 00:00:09,950 --> 00:00:11,990 So in this lecture, we're gonna build 4 4 00:00:11,990 --> 00:00:15,560 a nice UI component, such as this one here, 5 5 00:00:15,560 --> 00:00:18,530 which contains data about a certain country. 6 6 00:00:18,530 --> 00:00:20,490 And this data about the countries 7 7 00:00:20,490 --> 00:00:24,700 is actually gonna come from a third party online API. 8 8 00:00:24,700 --> 00:00:27,940 So just as we learned it in the last video. 9 9 00:00:27,940 --> 00:00:30,990 So here, we have this first card for Portugal, 10 10 00:00:30,990 --> 00:00:33,770 and then another card for the USA. 11 11 00:00:33,770 --> 00:00:35,360 And of course, this would work 12 12 00:00:35,360 --> 00:00:37,310 for any country in the world. 13 13 00:00:37,310 --> 00:00:41,130 And this is actually really exciting stuff to me. 14 14 00:00:41,130 --> 00:00:43,540 So I think it feels really magical, 15 15 00:00:43,540 --> 00:00:46,710 and next level, to be able to do this. 16 16 00:00:46,710 --> 00:00:49,740 So to kind of magically get this kind of data 17 17 00:00:49,740 --> 00:00:52,210 from the internet, and then work with it 18 18 00:00:52,210 --> 00:00:54,900 in any application that we're building. 19 19 00:00:54,900 --> 00:00:57,550 And so let's now start working on this. 20 20 00:00:57,550 --> 00:01:00,590 And as always, I already have my starter files 21 21 00:01:00,590 --> 00:01:02,423 up here in VS Code. 22 22 00:01:03,320 --> 00:01:06,510 And I also already started the live server, 23 23 00:01:06,510 --> 00:01:09,820 and so that's what I have here open. 24 24 00:01:09,820 --> 00:01:12,460 And so now let's get to work. 25 25 00:01:12,460 --> 00:01:15,660 Now in JavaScript, there are actually multiple ways 26 26 00:01:15,660 --> 00:01:17,600 of doing AJAX calls. 27 27 00:01:17,600 --> 00:01:20,580 But we're gonna start with the most old school one. 28 28 00:01:20,580 --> 00:01:25,460 And that's called the XML HTTP request function. 29 29 00:01:25,460 --> 00:01:30,460 So we can do new XML HTTP request. 30 30 00:01:31,970 --> 00:01:33,333 So just this one here. 31 31 00:01:34,920 --> 00:01:36,460 So we call this function 32 32 00:01:36,460 --> 00:01:38,350 and then all we need to do for now 33 33 00:01:38,350 --> 00:01:41,333 is to store the result in a new variable. 34 34 00:01:42,370 --> 00:01:45,603 So let's call this one request. 35 35 00:01:46,590 --> 00:01:48,040 And so that's the first step 36 36 00:01:48,040 --> 00:01:51,580 of using the XML HTTP request way 37 37 00:01:51,580 --> 00:01:53,810 of doing AJAX calls. 38 38 00:01:53,810 --> 00:01:55,580 Now again, as I mentioned, 39 39 00:01:55,580 --> 00:01:59,930 this is the old school way of doing AJAX in JavaScript. 40 40 00:01:59,930 --> 00:02:03,260 But I'm still showing it to you for two reasons. 41 41 00:02:03,260 --> 00:02:08,240 So first, I want you to know that XML HTTP requests exists, 42 42 00:02:08,240 --> 00:02:11,370 because you might actually need it in the future. 43 43 00:02:11,370 --> 00:02:14,870 And second, I want to show you how AJAX calls 44 44 00:02:14,870 --> 00:02:16,920 used to be handled with events 45 45 00:02:16,920 --> 00:02:18,660 and callback functions. 46 46 00:02:18,660 --> 00:02:20,200 And so only after that 47 47 00:02:20,200 --> 00:02:22,860 we should move on to a more modern way 48 48 00:02:22,860 --> 00:02:25,290 of handling asynchronous JavaScript, 49 49 00:02:25,290 --> 00:02:29,010 which is gonna be a feature called Promises. 50 50 00:02:29,010 --> 00:02:31,690 But anyway, next, we need the URL 51 51 00:02:31,690 --> 00:02:34,950 to which we will make the AJAX call. 52 52 00:02:34,950 --> 00:02:38,840 So we can now say, request, 53 53 00:02:38,840 --> 00:02:43,483 so that object that we created here, .open. 54 54 00:02:44,600 --> 00:02:45,690 And in here, first, 55 55 00:02:45,690 --> 00:02:48,573 we need to pass in the type of request. 56 56 00:02:49,610 --> 00:02:52,780 And remember that the type of HTTP request 57 57 00:02:52,780 --> 00:02:56,130 to get data is simply called GET. 58 58 00:02:56,130 --> 00:02:59,670 And second, we need a string containing the URL 59 59 00:02:59,670 --> 00:03:02,940 to which the AJAX call should actually be made. 60 60 00:03:02,940 --> 00:03:05,940 So let me now show you the API that I selected 61 61 00:03:05,940 --> 00:03:09,560 for this project and also how we can use it 62 62 00:03:09,560 --> 00:03:12,220 so that you can actually understand 63 63 00:03:12,220 --> 00:03:14,653 how you could do something similar yourself. 64 64 00:03:15,670 --> 00:03:18,930 So on GitHub, there is this huge repository, 65 65 00:03:18,930 --> 00:03:22,560 as you can see here, which is called Public APIs. 66 66 00:03:22,560 --> 00:03:24,380 And so if you just Google for that, 67 67 00:03:24,380 --> 00:03:26,390 I'm sure that you will find it. 68 68 00:03:26,390 --> 00:03:29,050 And here is a list of a ton of public 69 69 00:03:29,050 --> 00:03:31,253 and free API's that you can use. 70 70 00:03:32,090 --> 00:03:34,810 So we have all these different categories here. 71 71 00:03:34,810 --> 00:03:38,020 And so there's really an API for everything. 72 72 00:03:38,020 --> 00:03:40,860 So just as I said, in the last video, 73 73 00:03:40,860 --> 00:03:43,240 and the one that we are going to use 74 74 00:03:43,240 --> 00:03:47,280 is called rest countries. 75 75 00:03:47,280 --> 00:03:49,343 So it's this one here, all right. 76 76 00:03:51,570 --> 00:03:55,733 So we see here that, well this is a big table, 77 77 00:03:56,650 --> 00:03:59,190 so we see that the API we are going to use 78 78 00:03:59,190 --> 00:04:01,500 needs no authentication. 79 79 00:04:01,500 --> 00:04:06,500 I think it uses HTTPS and I'm not sure about course. 80 80 00:04:06,950 --> 00:04:08,800 And this one here is important. 81 81 00:04:08,800 --> 00:04:11,050 So any API that you use here 82 82 00:04:11,050 --> 00:04:14,230 should always have CORS set to Yes, 83 83 00:04:14,230 --> 00:04:16,930 or maybe to Unknown, am I right? 84 84 00:04:16,930 --> 00:04:20,640 And CORS stands for Cross Origin Resource Sharing. 85 85 00:04:20,640 --> 00:04:24,480 And without CORS, we cannot access a third party API 86 86 00:04:24,480 --> 00:04:27,733 from our own code, and so going back here, 87 87 00:04:29,310 --> 00:04:31,773 well, now it's gone, here it is. 88 88 00:04:33,160 --> 00:04:35,510 So you see, it doesn't need authentication, 89 89 00:04:35,510 --> 00:04:37,900 and it uses HTTPS. 90 90 00:04:37,900 --> 00:04:40,790 So this is a good one and so let's click it, 91 91 00:04:40,790 --> 00:04:43,963 which will take us basically to the documentation page. 92 92 00:04:45,090 --> 00:04:46,670 And now here, I'm simply looking 93 93 00:04:46,670 --> 00:04:49,520 for a so called API endpoint. 94 94 00:04:49,520 --> 00:04:52,450 And so the endpoint is essentially just another name 95 95 00:04:52,450 --> 00:04:54,960 for the URL that we need. 96 96 00:04:54,960 --> 00:04:58,200 So here we have the first URL, 97 97 00:04:58,200 --> 00:05:01,210 and this one is basically for all countries. 98 98 00:05:01,210 --> 00:05:04,210 So if we wanted to get a list of all the countries 99 99 00:05:04,210 --> 00:05:08,893 from this API, we could make an AJAX call to this URL here. 100 100 00:05:09,760 --> 00:05:12,600 Okay, but that's not what we want. 101 101 00:05:12,600 --> 00:05:15,993 Instead, I want to search the API by country name. 102 102 00:05:16,970 --> 00:05:19,600 And so therefore, this here is the URL 103 103 00:05:19,600 --> 00:05:21,250 that I'm going to use. 104 104 00:05:21,250 --> 00:05:24,740 So let's copy it and I hope that you followed 105 105 00:05:24,740 --> 00:05:26,130 these steps here. 106 106 00:05:26,130 --> 00:05:28,973 And if not, you can of course, simply paste it here. 107 107 00:05:31,216 --> 00:05:32,049 Am I right? 108 108 00:05:32,049 --> 00:05:35,730 And I will start with Portugal, 109 109 00:05:35,730 --> 00:05:38,593 but you can, of course, use your own country. 110 110 00:05:40,040 --> 00:05:43,450 So with this, we basically open the request. 111 111 00:05:43,450 --> 00:05:45,833 And now next, we need to also send it. 112 112 00:05:47,550 --> 00:05:50,280 So you see, there are a lot of steps involved 113 113 00:05:50,280 --> 00:05:53,960 when using this way of doing an AJAX call. 114 114 00:05:53,960 --> 00:05:57,300 Okay, so this will now send off the request 115 115 00:05:57,300 --> 00:05:59,173 to this URL here. 116 116 00:06:00,120 --> 00:06:02,700 Now, in order to get the result, 117 117 00:06:02,700 --> 00:06:05,693 we couldn't simply do maybe something like this. 118 118 00:06:06,980 --> 00:06:10,990 So set some variable simply to this result here. 119 119 00:06:10,990 --> 00:06:13,370 And the reason why we cannot do this 120 120 00:06:13,370 --> 00:06:18,150 is because the result is simply not there yet, right. 121 121 00:06:18,150 --> 00:06:21,190 So this AJAX call that we just send off here, 122 122 00:06:21,190 --> 00:06:23,290 is being done in the background, 123 123 00:06:23,290 --> 00:06:25,760 while the rest of the code keeps running. 124 124 00:06:25,760 --> 00:06:27,760 And so this is the asynchronous, 125 125 00:06:27,760 --> 00:06:30,280 non-blocking behavior that we talked about 126 126 00:06:30,280 --> 00:06:31,283 in the last lecture. 127 127 00:06:32,140 --> 00:06:33,940 So let's get rid of this. 128 128 00:06:33,940 --> 00:06:35,770 And instead, what we need to do 129 129 00:06:35,770 --> 00:06:37,640 is to register a callback 130 130 00:06:37,640 --> 00:06:40,643 on the request object for the load event. 131 131 00:06:41,920 --> 00:06:44,920 So request, and then again, 132 132 00:06:44,920 --> 00:06:47,999 our old friend, addEventListener. 133 133 00:06:47,999 --> 00:06:49,330 And here on the request, 134 134 00:06:49,330 --> 00:06:52,053 we will wait for the load event. 135 135 00:06:56,090 --> 00:07:00,100 So again, here, we basically send off the request. 136 136 00:07:00,100 --> 00:07:01,240 And so that request 137 137 00:07:01,240 --> 00:07:03,800 then fetches the data in the background. 138 138 00:07:03,800 --> 00:07:05,630 And then once that is done, 139 139 00:07:05,630 --> 00:07:08,010 it will emit the load event. 140 140 00:07:08,010 --> 00:07:10,260 And so using this event listener, 141 141 00:07:10,260 --> 00:07:12,210 we are waiting for that event. 142 142 00:07:12,210 --> 00:07:14,370 And so as soon as the data arrives, 143 143 00:07:14,370 --> 00:07:16,973 this callback function here will be called. 144 144 00:07:18,330 --> 00:07:22,490 Now, let's then actually log the result to the console. 145 145 00:07:22,490 --> 00:07:24,930 So the this keyword inside of this function 146 146 00:07:24,930 --> 00:07:27,920 is the request, right? 147 147 00:07:27,920 --> 00:07:30,030 So we could also do request, 148 148 00:07:30,030 --> 00:07:32,270 but let's just use the this keyword. 149 149 00:07:32,270 --> 00:07:36,980 And then the response is in the property response text. 150 150 00:07:36,980 --> 00:07:39,430 And again, this property here is of course, 151 151 00:07:39,430 --> 00:07:40,670 only gonna be set 152 152 00:07:40,670 --> 00:07:44,770 once the data has actually arrived, right. 153 153 00:07:44,770 --> 00:07:46,810 So if we tried to set it out here, 154 154 00:07:46,810 --> 00:07:49,223 then that wouldn't work, of course. 155 155 00:07:50,420 --> 00:07:55,037 We can still try that just to see request.responsetext. 156 156 00:07:56,640 --> 00:08:00,220 And so that would be exactly the same as this one. 157 157 00:08:00,220 --> 00:08:03,983 And well, already, we have our first data here. 158 158 00:08:05,170 --> 00:08:08,450 So that's great, and as you see, 159 159 00:08:08,450 --> 00:08:12,460 this is the result of our very first AJAX call. 160 160 00:08:12,460 --> 00:08:15,280 So great job, this already worked. 161 161 00:08:15,280 --> 00:08:17,860 And you see that this kind of looks 162 162 00:08:17,860 --> 00:08:21,093 like a bunch of data about Portugal indeed. 163 163 00:08:22,310 --> 00:08:24,420 Now, we just need to convert this here 164 164 00:08:24,420 --> 00:08:26,710 to an actual JavaScript object. 165 165 00:08:26,710 --> 00:08:29,970 Because what we have here right now is JSON. 166 166 00:08:29,970 --> 00:08:32,490 So remember that JSON is basically 167 167 00:08:32,490 --> 00:08:35,050 just a big string of text. 168 168 00:08:35,050 --> 00:08:39,053 And so what we need to do here is to then convert that. 169 169 00:08:40,250 --> 00:08:42,890 We already did that before, actually. 170 170 00:08:42,890 --> 00:08:47,890 So that's JSON.parsethis.responsetext. 171 171 00:08:53,240 --> 00:08:57,470 So let's take a look at the data. 172 172 00:08:57,470 --> 00:08:59,460 And by the way, as you see here, 173 173 00:08:59,460 --> 00:09:03,720 of course, the result of request.responsetext 174 174 00:09:03,720 --> 00:09:08,520 out here is nothing, right? 175 175 00:09:08,520 --> 00:09:09,960 So let's get rid of it. 176 176 00:09:09,960 --> 00:09:13,080 And so indeed, here we have this object 177 177 00:09:13,080 --> 00:09:15,513 with all this data about Portugal. 178 178 00:09:16,350 --> 00:09:18,380 So we have the capital, which is Lisbon, 179 179 00:09:18,380 --> 00:09:21,220 we have the flag even. 180 180 00:09:21,220 --> 00:09:24,280 So basically a link to the image of the flag. 181 181 00:09:24,280 --> 00:09:26,656 And indeed, this is where we're gonna get 182 182 00:09:26,656 --> 00:09:29,247 this flag here from 183 183 00:09:29,247 --> 00:09:31,400 and then all kinds of other stuff, 184 184 00:09:31,400 --> 00:09:35,780 like the location, the population, region, 185 185 00:09:35,780 --> 00:09:38,220 and so on, and so forth. 186 186 00:09:38,220 --> 00:09:39,840 Now, you'll see that this is actually 187 187 00:09:39,840 --> 00:09:42,860 an array containing one object. 188 188 00:09:42,860 --> 00:09:46,863 And so let's quickly de-structure that like this. 189 189 00:09:48,620 --> 00:09:52,670 So remember, that would be the same thing as doing this. 190 190 00:09:52,670 --> 00:09:54,890 Right, but of course, de-structuring 191 191 00:09:54,890 --> 00:09:56,610 is a lot more beautiful. 192 192 00:09:56,610 --> 00:09:59,383 And so now we get immediately the object here. 193 193 00:10:01,060 --> 00:10:05,170 Great, and now we can actually build that card component. 194 194 00:10:05,170 --> 00:10:08,713 And so let's copy the HTML here from this comment. 195 195 00:10:09,890 --> 00:10:12,610 So open the index.HTML file, 196 196 00:10:12,610 --> 00:10:14,400 get the HTML from there. 197 197 00:10:14,400 --> 00:10:18,470 And then we can create a template literal, 198 198 00:10:18,470 --> 00:10:20,203 that we then have to fill up. 199 199 00:10:24,230 --> 00:10:26,350 Here, I'm of course, missing the name. 200 200 00:10:26,350 --> 00:10:28,233 And as always, I'm calling it HTML. 201 201 00:10:31,670 --> 00:10:35,223 And so now all we have to do is to replace this data. 202 202 00:10:37,410 --> 00:10:40,640 So let's open it to see what we actually have. 203 203 00:10:40,640 --> 00:10:44,440 So here, we are actually starting with the image. 204 204 00:10:44,440 --> 00:10:46,160 So we need a source and of course, 205 205 00:10:46,160 --> 00:10:48,370 that source can be any URL, 206 206 00:10:48,370 --> 00:10:50,520 and doesn't have to be a local image 207 207 00:10:50,520 --> 00:10:52,470 that we have on our computer. 208 208 00:10:52,470 --> 00:10:55,880 And so the one we will use is this one here. 209 209 00:10:55,880 --> 00:11:00,880 And so that is at data.flag. 210 210 00:11:01,640 --> 00:11:05,963 Next up, this is where the actual name of the country goes. 211 211 00:11:07,550 --> 00:11:12,550 So data. yeah, so down here is the name. 212 212 00:11:15,850 --> 00:11:18,470 Then here, I also enter region. 213 213 00:11:18,470 --> 00:11:20,320 So that would be Europe in this case. 214 214 00:11:21,430 --> 00:11:23,903 And so this is the one. 215 215 00:11:26,170 --> 00:11:31,170 So that's data.region. 216 216 00:11:31,620 --> 00:11:34,300 And then finally, we also want some information 217 217 00:11:34,300 --> 00:11:37,910 about the population, language, and currency. 218 218 00:11:37,910 --> 00:11:42,910 And all of that is present here in this data, 219 219 00:11:43,610 --> 00:11:48,513 so that's at data.population. 220 220 00:11:51,010 --> 00:11:54,980 And so this here is basically 10 million. 221 221 00:11:54,980 --> 00:11:57,660 So we don't want to display this entire number. 222 222 00:11:57,660 --> 00:12:02,530 So let's just round it to 10.3 or 10.4 million. 223 223 00:12:02,530 --> 00:12:04,230 So the way we can do that 224 224 00:12:04,230 --> 00:12:07,720 is to convert this first two number. 225 225 00:12:07,720 --> 00:12:10,760 So as always, I'm just using plus for that. 226 226 00:12:10,760 --> 00:12:13,183 Then divide it by a million. 227 227 00:12:15,750 --> 00:12:19,730 So yeah, that's a million. 228 228 00:12:19,730 --> 00:12:22,333 And then let's round this value finally. 229 229 00:12:24,920 --> 00:12:27,030 So this is a number and so on a number 230 230 00:12:27,030 --> 00:12:32,030 we can call toFixed with one decimal place. 231 231 00:12:32,150 --> 00:12:36,200 Next up language, so I'm doing this pretty fast 232 232 00:12:36,200 --> 00:12:38,180 because here we are basically 233 233 00:12:38,180 --> 00:12:42,543 just practicing what we already know, right? 234 234 00:12:43,450 --> 00:12:46,020 So again, this one is for languages. 235 235 00:12:46,020 --> 00:12:51,020 And so let's see, so languages is basically an array. 236 236 00:12:53,175 --> 00:12:55,853 No, I clicked, and so now it's gone. 237 237 00:12:57,420 --> 00:13:00,340 So let me just put something else here for now. 238 238 00:13:00,340 --> 00:13:02,353 Because this was causing the error. 239 239 00:13:03,950 --> 00:13:06,800 So let's see the languages 240 240 00:13:06,800 --> 00:13:08,763 we have multiple here, as you see. 241 241 00:13:09,950 --> 00:13:12,810 And so what we want is simply 242 242 00:13:12,810 --> 00:13:16,073 the first element of the languages, and then the name. 243 243 00:13:17,110 --> 00:13:18,650 Now it's the same as actually gonna happen 244 244 00:13:18,650 --> 00:13:19,713 with the currencies. 245 245 00:13:20,850 --> 00:13:22,960 So we also have an array of the currencies. 246 246 00:13:22,960 --> 00:13:26,343 And then we want the name of the first one. 247 247 00:13:29,430 --> 00:13:34,430 So again, we want to data.languages, 248 248 00:13:34,560 --> 00:13:37,000 the first element, and from there, 249 249 00:13:37,000 --> 00:13:42,000 we want to take the name, and the same with the currencies. 250 250 00:13:46,090 --> 00:13:51,090 Currencies, right, and that should be it. 251 251 00:13:51,510 --> 00:13:52,980 And now all we have to do 252 252 00:13:52,980 --> 00:13:57,513 is to then actually insert this HTML into our page. 253 253 00:13:59,400 --> 00:14:02,143 So I actually already have it here selected. 254 254 00:14:03,240 --> 00:14:07,920 But just to make it complete, let me show it to you. 255 255 00:14:07,920 --> 00:14:10,610 So we have this countries element here. 256 256 00:14:10,610 --> 00:14:13,123 And so that's what I call the countries container. 257 257 00:14:14,880 --> 00:14:19,880 And so here we want country.insertAdjacentHTML, 258 258 00:14:23,298 --> 00:14:27,465 beforeend, and then the HTML that we just created. 259 259 00:14:29,520 --> 00:14:32,110 Now finally, we also need to set the style 260 260 00:14:33,478 --> 00:14:35,653 of this container to opacity one. 261 261 00:14:36,550 --> 00:14:40,913 So let me show you that one also in the code. 262 262 00:14:42,820 --> 00:14:46,230 So I set the opacity of the country's container 263 263 00:14:46,230 --> 00:14:47,570 here to zero. 264 264 00:14:47,570 --> 00:14:50,650 And so now we set it to one so that we can then see 265 265 00:14:50,650 --> 00:14:53,430 a nice animation, which is gonna be triggered 266 266 00:14:53,430 --> 00:14:56,940 by this transition okay. 267 267 00:14:56,940 --> 00:14:58,940 First, let's give us some space 268 268 00:14:58,940 --> 00:15:00,490 so we can then actually see it. 269 269 00:15:02,630 --> 00:15:04,370 And so, as I just said, 270 270 00:15:04,370 --> 00:15:09,267 we need to say countriesContainer.style.opacity 271 271 00:15:12,750 --> 00:15:14,550 and set it to one. 272 272 00:15:14,550 --> 00:15:19,343 And now as I save it, the data should appear and it does. 273 273 00:15:20,670 --> 00:15:23,870 So that's amazing, right? 274 274 00:15:23,870 --> 00:15:27,283 And it looks just like here in our demo. 275 275 00:15:28,510 --> 00:15:30,350 So that's fantastic, 276 276 00:15:30,350 --> 00:15:33,790 I really love it when it works just like this. 277 277 00:15:33,790 --> 00:15:36,520 So getting data from some third party API 278 278 00:15:37,390 --> 00:15:39,133 really feels like magic to me. 279 279 00:15:40,690 --> 00:15:44,490 Now, let's actually reuse the same code here 280 280 00:15:44,490 --> 00:15:48,960 to create an element like this for multiple countries. 281 281 00:15:48,960 --> 00:15:50,530 And so what I'm gonna do 282 282 00:15:50,530 --> 00:15:53,563 is to put all of this into a function. 283 283 00:15:55,280 --> 00:15:57,243 Let's call it getCountryData. 284 284 00:15:58,370 --> 00:16:02,420 And so this one will take a string 285 285 00:16:02,420 --> 00:16:05,093 as an input of a country, okay. 286 286 00:16:08,410 --> 00:16:11,203 So the curly brace down here. 287 287 00:16:12,884 --> 00:16:15,450 And then here, instead of hard coding Portugal, 288 288 00:16:15,450 --> 00:16:18,943 we will use that country that we get as an input. 289 289 00:16:24,120 --> 00:16:29,120 All right, country, and to now down here, 290 290 00:16:29,830 --> 00:16:31,380 we can then call this function, 291 291 00:16:32,428 --> 00:16:37,428 getCountryData, Portugal. 292 292 00:16:38,760 --> 00:16:43,130 So let's see, and yep, that worked just the same. 293 293 00:16:43,130 --> 00:16:44,630 And now let's try another one. 294 294 00:16:45,640 --> 00:16:48,470 So let's try the United States of America, 295 295 00:16:48,470 --> 00:16:53,470 just like I had it in my demo, and here we go. 296 296 00:16:54,780 --> 00:16:58,100 So now we have data about two countries. 297 297 00:16:58,100 --> 00:17:01,470 And by calling these functions here twice, 298 298 00:17:01,470 --> 00:17:03,710 we will basically have two AJAX calls 299 299 00:17:03,710 --> 00:17:05,830 happening at the same time. 300 300 00:17:05,830 --> 00:17:08,280 So in parallel, so to say. 301 301 00:17:08,280 --> 00:17:11,533 And if we reload this page here a couple of times, 302 302 00:17:13,140 --> 00:17:15,660 then they might appear in a different order. 303 303 00:17:15,660 --> 00:17:17,870 And the reason for that is basically 304 304 00:17:17,870 --> 00:17:21,200 that the data arrives at a slightly different time, 305 305 00:17:21,200 --> 00:17:23,730 each time that we're loading the page. 306 306 00:17:23,730 --> 00:17:26,220 And so in fact, this really shows 307 307 00:17:26,220 --> 00:17:28,950 the non-blocking behavior in action. 308 308 00:17:28,950 --> 00:17:33,100 So as we call getCountryData here with Portugal, 309 309 00:17:33,100 --> 00:17:36,920 for the very first time, it sends of this request, 310 310 00:17:36,920 --> 00:17:40,310 and then JavaScript moves on in the code right away. 311 311 00:17:40,310 --> 00:17:43,560 And so it goes right here to this next line. 312 312 00:17:43,560 --> 00:17:46,360 And this, of course, fires off another AJAX call 313 313 00:17:46,360 --> 00:17:49,800 immediately, way before the data of Portugal 314 314 00:17:49,800 --> 00:17:51,570 has actually arrived. 315 315 00:17:51,570 --> 00:17:53,860 So again, we will have two AJAX call 316 316 00:17:53,860 --> 00:17:55,800 happening at the same time. 317 317 00:17:55,800 --> 00:17:58,290 And so whatever one arrives first, 318 318 00:17:58,290 --> 00:18:02,040 will then fire the load event first. 319 319 00:18:02,040 --> 00:18:06,210 And so if the first one is to AJAX call for the USA, 320 320 00:18:06,210 --> 00:18:08,350 well, then the first element 321 321 00:18:08,350 --> 00:18:10,620 that's gonna be printed here will of course, 322 322 00:18:10,620 --> 00:18:12,860 be the one from the USA. 323 323 00:18:12,860 --> 00:18:15,800 And only after that the data for Portugal arrives. 324 324 00:18:15,800 --> 00:18:17,870 And then this callback function here 325 325 00:18:17,870 --> 00:18:20,880 is called with the data of Portugal. 326 326 00:18:20,880 --> 00:18:22,740 And of course, the same would be true 327 327 00:18:22,740 --> 00:18:25,963 no matter how other requests, we would fire off here. 328 328 00:18:28,680 --> 00:18:31,440 Let's say Germany here. 329 329 00:18:31,440 --> 00:18:35,870 And so now, we actually got the data in the same order. 330 330 00:18:35,870 --> 00:18:39,340 But so now it's actually completely different. 331 331 00:18:39,340 --> 00:18:43,280 And so this confirms what I just explained before. 332 332 00:18:43,280 --> 00:18:47,050 Now, if we actually wanted these requests to be made 333 333 00:18:47,050 --> 00:18:50,750 in a specific, like predefined order, 334 334 00:18:50,750 --> 00:18:54,220 then we would basically have to chain the requests. 335 335 00:18:54,220 --> 00:18:56,650 Which means to make the second request 336 336 00:18:56,650 --> 00:19:00,330 only after the first request has finished. 337 337 00:19:00,330 --> 00:19:03,200 And that's actually what we're gonna do in the next lecture 338 338 00:19:03,200 --> 00:19:04,970 so that I can show you something 339 339 00:19:04,970 --> 00:19:07,743 that we developers called callback hell. 29289