WEBVTT 1 00:00:01.350 --> 00:00:05.130 So now that we know about Ajax and APIs, 2 00:00:05.130 --> 00:00:08.283 let's actually make our first API call. 3 00:00:09.930 --> 00:00:13.710 So in this lecture, we're gonna build a nice UI component 4 00:00:13.710 --> 00:00:15.540 such as this one here, 5 00:00:15.540 --> 00:00:18.510 which contains data about a certain country. 6 00:00:18.510 --> 00:00:20.490 And this data about the countries 7 00:00:20.490 --> 00:00:24.690 is actually gonna come from a third-party online API, 8 00:00:24.690 --> 00:00:27.930 so just as we learned in the last video. 9 00:00:27.930 --> 00:00:30.990 So here we have this first card for Portugal, 10 00:00:30.990 --> 00:00:33.780 and then another card for the USA. 11 00:00:33.780 --> 00:00:35.370 And, of course, this would work 12 00:00:35.370 --> 00:00:37.290 for any country in the world. 13 00:00:37.290 --> 00:00:41.130 And this is actually really exciting stuff to me. 14 00:00:41.130 --> 00:00:43.530 So I think it feels really magical 15 00:00:43.530 --> 00:00:46.710 and next level to be able to do this, 16 00:00:46.710 --> 00:00:49.740 so to kind of magically get this kind of data 17 00:00:49.740 --> 00:00:52.200 from the internet and then work with it 18 00:00:52.200 --> 00:00:54.870 in any application that we're building. 19 00:00:54.870 --> 00:00:57.540 And so, let's now start working on this. 20 00:00:57.540 --> 00:01:00.570 And as always, I already have my starter files 21 00:01:00.570 --> 00:01:02.403 up here in VS Code, 22 00:01:03.330 --> 00:01:06.510 and I also already started the live server. 23 00:01:06.510 --> 00:01:09.810 And so that's what I have here open, 24 00:01:09.810 --> 00:01:12.480 and so now let's get to work. 25 00:01:12.480 --> 00:01:15.690 Now, in JavaScript, there are actually multiple ways 26 00:01:15.690 --> 00:01:17.610 of doing Ajax calls, 27 00:01:17.610 --> 00:01:20.580 but we're gonna start with the most old-school one, 28 00:01:20.580 --> 00:01:25.470 and that's called the XMLHTTPRequest function. 29 00:01:25.470 --> 00:01:30.470 So we can do new XMLHTTPRequest, so just this one here. 30 00:01:34.920 --> 00:01:36.450 So we call this function, 31 00:01:36.450 --> 00:01:38.340 and then all we need to do for now 32 00:01:38.340 --> 00:01:41.343 is to store the results in a new variable. 33 00:01:42.390 --> 00:01:45.603 So let's call this one request. 34 00:01:46.590 --> 00:01:48.030 And so, that's the first step 35 00:01:48.030 --> 00:01:53.030 of using the XMLHTTPRequest way of doing Ajax calls. 36 00:01:53.790 --> 00:01:55.590 Now again, as I mentioned, 37 00:01:55.590 --> 00:01:59.910 this is the old-school way of doing Ajax in JavaScript, 38 00:01:59.910 --> 00:02:03.270 but I'm still showing it to you for two reasons. 39 00:02:03.270 --> 00:02:08.250 So first, I want you to know that XMLHTTPRequest exists 40 00:02:08.250 --> 00:02:11.370 because you might actually need it in the future. 41 00:02:11.370 --> 00:02:14.880 And second, I want to show you how Ajax calls 42 00:02:14.880 --> 00:02:18.660 used to be handled with events and callback functions. 43 00:02:18.660 --> 00:02:21.150 And so, only after that, we should move on 44 00:02:21.150 --> 00:02:25.290 to a more modern way of handling asynchronous JavaScript, 45 00:02:25.290 --> 00:02:29.010 which is gonna be a feature called promises. 46 00:02:29.010 --> 00:02:31.680 But anyway, next, we need the URL 47 00:02:31.680 --> 00:02:34.950 to which we will make the Ajax call. 48 00:02:34.950 --> 00:02:38.820 So we can now say request, 49 00:02:38.820 --> 00:02:43.503 so that object that we created here, .open. 50 00:02:44.610 --> 00:02:47.130 And then here, first, we need to pass in 51 00:02:47.130 --> 00:02:48.573 the type of request. 52 00:02:49.620 --> 00:02:54.030 And, remember, that the type of HTTP request to get data 53 00:02:54.030 --> 00:02:56.130 is simply called GET. 54 00:02:56.130 --> 00:02:59.670 And second, we need a string containing the URL 55 00:02:59.670 --> 00:03:02.940 to which the Ajax call should actually be made. 56 00:03:02.940 --> 00:03:05.040 So let me now show you the API 57 00:03:05.040 --> 00:03:07.470 that I selected for this project, 58 00:03:07.470 --> 00:03:09.570 and also how we can use it 59 00:03:09.570 --> 00:03:12.210 so that you can actually understand 60 00:03:12.210 --> 00:03:14.673 how you could do something similar yourself. 61 00:03:15.660 --> 00:03:18.750 So on GitHub, there is this huge repository, 62 00:03:18.750 --> 00:03:22.590 as you can see here, which is called Public APIs. 63 00:03:22.590 --> 00:03:24.360 And so, if you just Google for that, 64 00:03:24.360 --> 00:03:26.400 I'm sure that you'll find it. 65 00:03:26.400 --> 00:03:29.040 And here is a list of a ton of public 66 00:03:29.040 --> 00:03:31.233 and free APIs that you can use. 67 00:03:32.100 --> 00:03:34.800 So we have all these different categories here, 68 00:03:34.800 --> 00:03:38.010 and so there's really an API for everything. 69 00:03:38.010 --> 00:03:40.860 So just as I said in the last video, 70 00:03:40.860 --> 00:03:43.230 and the one that we are going to use 71 00:03:43.230 --> 00:03:47.280 is called REST Countries. 72 00:03:47.280 --> 00:03:49.353 So it's this one here, all right? 73 00:03:51.570 --> 00:03:55.743 So we see here that, well, this is a big table. 74 00:03:56.640 --> 00:03:59.190 So we see that the API we are going to use 75 00:03:59.190 --> 00:04:01.500 needs no authentication. 76 00:04:01.500 --> 00:04:06.500 I think it uses HTTPS, and I'm not sure about CORS. 77 00:04:06.900 --> 00:04:08.820 And this one here is important. 78 00:04:08.820 --> 00:04:11.070 So any API that you use here 79 00:04:11.070 --> 00:04:14.220 should always have CORS set to yes, 80 00:04:14.220 --> 00:04:16.920 or maybe to unknown, All right. 81 00:04:16.920 --> 00:04:20.640 and CORS stands for Cross-Origin Resource Sharing, 82 00:04:20.640 --> 00:04:22.890 And without CORS we cannot access 83 00:04:22.890 --> 00:04:26.280 a third-party API from our own code. 84 00:04:26.280 --> 00:04:30.660 And so, going back here, well, now it's gone- 85 00:04:30.660 --> 00:04:31.863 no, here it is. 86 00:04:33.150 --> 00:04:35.520 So you see, it doesn't need authentication, 87 00:04:35.520 --> 00:04:37.890 and it uses HTTPS. 88 00:04:37.890 --> 00:04:39.420 So this is a good one. 89 00:04:39.420 --> 00:04:40.800 And so, let's click it, 90 00:04:40.800 --> 00:04:43.983 which will take us basically to the documentation page. 91 00:04:45.090 --> 00:04:46.680 And now here, I'm simply looking 92 00:04:46.680 --> 00:04:49.530 for a so-called API endpoint. 93 00:04:49.530 --> 00:04:52.440 And so the endpoint is essentially just another name 94 00:04:52.440 --> 00:04:55.170 for the URL that we need. 95 00:04:55.170 --> 00:04:57.900 Now, shortly after recording this video, 96 00:04:57.900 --> 00:05:00.660 this API has changed a little bit. 97 00:05:00.660 --> 00:05:03.840 So it's now called restcountries.com, 98 00:05:03.840 --> 00:05:08.490 and it is on version 3.1 instead of the version 2 99 00:05:08.490 --> 00:05:11.190 that you can see here on the screen. 100 00:05:11.190 --> 00:05:15.360 However, you should still use the version 2 of the API 101 00:05:15.360 --> 00:05:17.430 so that all the code that we're gonna write 102 00:05:17.430 --> 00:05:19.950 throughout this section keeps working. 103 00:05:19.950 --> 00:05:23.670 And so, for that, instead of using the API endpoints 104 00:05:23.670 --> 00:05:27.000 that I'm gonna show you here in this documentation page, 105 00:05:27.000 --> 00:05:32.000 please use the API URL that is part of the starter files 106 00:05:32.040 --> 00:05:36.030 and that I will also now display here on the screen. 107 00:05:36.030 --> 00:05:39.960 So as you see, this API URL is pretty similar, 108 00:05:39.960 --> 00:05:42.870 it just requires some small changes. 109 00:05:42.870 --> 00:05:47.870 So again, please do not use the URL that I'm gonna copy here 110 00:05:47.970 --> 00:05:51.960 from the documentation page to VS Code in a minute, 111 00:05:51.960 --> 00:05:55.140 but instead use the one that is currently displayed 112 00:05:55.140 --> 00:05:59.940 on the screen on the left side, so from restcountries.com. 113 00:05:59.940 --> 00:06:02.370 But in any case, all the instructions 114 00:06:02.370 --> 00:06:04.290 that I'm gonna show you here in a minute 115 00:06:04.290 --> 00:06:07.473 still apply to this new URL. 116 00:06:08.340 --> 00:06:11.550 So here we have the first URL, 117 00:06:11.550 --> 00:06:14.580 and this one is basically for all countries. 118 00:06:14.580 --> 00:06:17.580 So if we wanted to get a list of all the countries 119 00:06:17.580 --> 00:06:22.263 from this API, we could make an Ajax call to this URL here. 120 00:06:23.130 --> 00:06:25.950 Okay, but that's not what we want. 121 00:06:25.950 --> 00:06:29.343 Instead, I want to search the API by country name. 122 00:06:30.330 --> 00:06:32.970 And so, therefore, this here is the URL 123 00:06:32.970 --> 00:06:34.620 that I'm going to use. 124 00:06:34.620 --> 00:06:38.100 So let's copy it, and I hope that you followed 125 00:06:38.100 --> 00:06:39.480 these steps here. 126 00:06:39.480 --> 00:06:42.363 And if not, you can, of course, simply paste it here. 127 00:06:44.460 --> 00:06:49.110 All right, and I will start with Portugal, 128 00:06:49.110 --> 00:06:51.963 but you can, of course, use your own country. 129 00:06:53.400 --> 00:06:56.820 So with this, we basically open the request, 130 00:06:56.820 --> 00:06:59.223 and now next we need to also send it. 131 00:07:00.930 --> 00:07:03.630 So you see, there are a lot of steps involved 132 00:07:03.630 --> 00:07:07.320 when using this way of doing an Ajax call. 133 00:07:07.320 --> 00:07:09.600 Okay, and so this will now send off 134 00:07:09.600 --> 00:07:12.543 the request to this URL here. 135 00:07:13.470 --> 00:07:16.050 Now, in order to get the result 136 00:07:16.050 --> 00:07:19.053 we couldn't simply do maybe something like this, 137 00:07:20.340 --> 00:07:24.360 so set some variable simply to this result here. 138 00:07:24.360 --> 00:07:26.730 And the reason why we cannot do this 139 00:07:26.730 --> 00:07:31.500 is because the result is simply not there yet, right? 140 00:07:31.500 --> 00:07:34.560 So this Ajax call that we just sent off here 141 00:07:34.560 --> 00:07:36.660 is being done in the background 142 00:07:36.660 --> 00:07:39.120 while the rest of the code keeps running. 143 00:07:39.120 --> 00:07:42.720 And so, this is the asynchronous, non-blocking behavior 144 00:07:42.720 --> 00:07:45.510 that we talked about in the last lecture. 145 00:07:45.510 --> 00:07:49.140 So let's get rid of this, and, instead, what we need to do 146 00:07:49.140 --> 00:07:52.560 is to register a callback on the request object 147 00:07:52.560 --> 00:07:54.003 for the load event. 148 00:07:55.290 --> 00:07:58.290 So request, and then, again, 149 00:07:58.290 --> 00:08:01.200 our old friend addEventListener, 150 00:08:01.200 --> 00:08:05.433 and here on the request we will wait for the load event. 151 00:08:09.450 --> 00:08:13.470 So, again, here we basically send off the request. 152 00:08:13.470 --> 00:08:17.160 And so that request then fetches the data in the background. 153 00:08:17.160 --> 00:08:21.390 And then once that is done, it will emit the load event, 154 00:08:21.390 --> 00:08:23.610 and so using this event listener 155 00:08:23.610 --> 00:08:25.560 we are waiting for that event. 156 00:08:25.560 --> 00:08:27.750 And so, as soon as the data arrives, 157 00:08:27.750 --> 00:08:30.333 this callback function here will be called. 158 00:08:31.680 --> 00:08:35.850 Now, let's then actually log the result to the console. 159 00:08:35.850 --> 00:08:39.483 So the this keyword inside of this function is the request, 160 00:08:41.280 --> 00:08:43.380 so we could also do request 161 00:08:43.380 --> 00:08:45.630 but let's just use the this keyword. 162 00:08:45.630 --> 00:08:50.340 And then the response is in the property responseText. 163 00:08:50.340 --> 00:08:52.770 And, again, this property here is, of course, 164 00:08:52.770 --> 00:08:56.163 only gonna be set once the data has actually arrived. 165 00:08:58.140 --> 00:09:00.660 So if we tried to set it out here, 166 00:09:00.660 --> 00:09:02.583 then that wouldn't work, of course. 167 00:09:03.780 --> 00:09:08.407 We can still try that just to see, request.responseText. 168 00:09:10.020 --> 00:09:13.380 And so that would be exactly the same as this one. 169 00:09:13.380 --> 00:09:17.313 And, well, already we have our first data here. 170 00:09:18.540 --> 00:09:21.810 So that's great, and, as you see, 171 00:09:21.810 --> 00:09:25.830 this is the result of our very first Ajax call. 172 00:09:25.830 --> 00:09:28.650 So, great job, this already worked. 173 00:09:28.650 --> 00:09:31.500 And you see that this kind of looks like 174 00:09:31.500 --> 00:09:34.473 a bunch of data about Portugal, indeed. 175 00:09:35.670 --> 00:09:37.800 Now we just need to convert this here 176 00:09:37.800 --> 00:09:40.080 to an actual JavaScript object, 177 00:09:40.080 --> 00:09:43.320 because what we have here right now is JSON. 178 00:09:43.320 --> 00:09:45.840 So remember that JSON is basically 179 00:09:45.840 --> 00:09:48.420 just a big string of text, 180 00:09:48.420 --> 00:09:52.413 and so what we need to do here is to then convert that. 181 00:09:53.610 --> 00:09:56.250 We already did that before, actually. 182 00:09:56.250 --> 00:09:58.827 So that's JSON.parse(this.responseText). 183 00:10:06.600 --> 00:10:10.830 So let's then take a look at the data. 184 00:10:10.830 --> 00:10:12.840 And by the way, as you see here, 185 00:10:12.840 --> 00:10:17.840 of course, the result of request.responseText out here 186 00:10:18.570 --> 00:10:21.900 is nothing, right? 187 00:10:21.900 --> 00:10:23.310 So let's get rid of it. 188 00:10:23.310 --> 00:10:26.430 And so indeed, here we have this object 189 00:10:26.430 --> 00:10:28.863 with all this data about Portugal. 190 00:10:29.700 --> 00:10:31.740 So we have the capital, which is Lisbon, 191 00:10:31.740 --> 00:10:34.590 we have the flag, even. 192 00:10:34.590 --> 00:10:37.620 So basically, a link to the image of the flag. 193 00:10:37.620 --> 00:10:39.670 And indeed, this is where we're gonna get 194 00:10:40.590 --> 00:10:42.780 this flag here from, 195 00:10:42.780 --> 00:10:46.680 and then all kinds of other stuff like the location, 196 00:10:46.680 --> 00:10:51.600 the population, the region, and so on and so forth. 197 00:10:51.600 --> 00:10:53.910 Now, you see that this is actually an array 198 00:10:53.910 --> 00:10:56.250 containing one object, 199 00:10:56.250 --> 00:11:00.243 and so let's quickly destructure that like this. 200 00:11:01.980 --> 00:11:05.313 So, remember, that would be the same thing as doing this. 201 00:11:06.840 --> 00:11:09.990 But, of course, destructuring is a lot more beautiful, 202 00:11:09.990 --> 00:11:12.753 and so now we got immediately the object here. 203 00:11:14.430 --> 00:11:18.540 Great. And now we can actually build that card component. 204 00:11:18.540 --> 00:11:22.083 And so let's copy the HTML here from this comment. 205 00:11:23.250 --> 00:11:28.250 So open the index.html file, get the HTML from there, 206 00:11:28.260 --> 00:11:31.830 and then we can create a template literal 207 00:11:31.830 --> 00:11:33.573 that we then have to fill up. 208 00:11:37.590 --> 00:11:39.720 Here I'm, of course, missing the name 209 00:11:39.720 --> 00:11:42.123 and, as always, I'm calling it html. 210 00:11:45.030 --> 00:11:48.603 And so now all we have to do is to replace this data. 211 00:11:50.790 --> 00:11:54.000 So let's open it to see what we actually have. 212 00:11:54.000 --> 00:11:57.810 So here we are actually starting with the image, 213 00:11:57.810 --> 00:11:58.980 so we need a source. 214 00:11:58.980 --> 00:12:01.770 And of course, that source can be any URL 215 00:12:01.770 --> 00:12:03.870 and doesn't have to be a local image 216 00:12:03.870 --> 00:12:05.850 that we have on our computer. 217 00:12:05.850 --> 00:12:09.240 And so the one we will use is this one here, 218 00:12:09.240 --> 00:12:14.240 and so that is at data.flag. 219 00:12:15.000 --> 00:12:19.353 Next up, this is where the actual name of the country goes. 220 00:12:20.910 --> 00:12:24.540 So data. (indistinct). Yeah. 221 00:12:24.540 --> 00:12:26.013 So down here is the name. 222 00:12:29.220 --> 00:12:31.830 Then here, I also want the region, 223 00:12:31.830 --> 00:12:33.680 so that would be Europe in this case. 224 00:12:34.800 --> 00:12:39.800 And so this is the one, so that's data.region. 225 00:12:44.970 --> 00:12:47.670 And then finally, we also want some information 226 00:12:47.670 --> 00:12:51.270 about the population, language, and currency. 227 00:12:51.270 --> 00:12:56.270 And all of that is present here in this data. 228 00:12:56.970 --> 00:13:01.893 So that's at data.population. 229 00:13:04.380 --> 00:13:08.340 And so this here is basically 10 million. 230 00:13:08.340 --> 00:13:11.010 So we don't want to display this entire number, 231 00:13:11.010 --> 00:13:15.900 so let's just round it to 10.3 or 10.4 million. 232 00:13:15.900 --> 00:13:17.580 So the way we can do that 233 00:13:17.580 --> 00:13:21.090 is to convert this first to a number. 234 00:13:21.090 --> 00:13:24.120 So, as always, I'm just using + for that, 235 00:13:24.120 --> 00:13:26.553 then divide by a million. 236 00:13:29.130 --> 00:13:33.090 So, yeah, that's a million, 237 00:13:33.090 --> 00:13:35.703 and then let's round this value finally. 238 00:13:38.280 --> 00:13:41.320 So this is a number, and so on a number we can call 239 00:13:42.240 --> 00:13:45.510 toFixed with one decimal place. 240 00:13:45.510 --> 00:13:46.953 Next up, language. 241 00:13:47.820 --> 00:13:49.560 So I'm doing this pretty fast 242 00:13:49.560 --> 00:13:52.560 because here we are basically just practicing 243 00:13:52.560 --> 00:13:53.793 what we already know. 244 00:13:56.820 --> 00:14:01.820 So, again, this one is for languages, and so let's see. 245 00:14:02.640 --> 00:14:04.863 So languages is basically an array. 246 00:14:06.360 --> 00:14:09.243 No, now I clicked and so now it's gone. 247 00:14:10.800 --> 00:14:13.710 So let me just put something else here for now, 248 00:14:13.710 --> 00:14:15.723 because this was causing the error. 249 00:14:17.310 --> 00:14:21.330 So, let's see, in languages we have multiple here, 250 00:14:21.330 --> 00:14:22.163 as you see. 251 00:14:23.310 --> 00:14:26.160 And so what we want is simply 252 00:14:26.160 --> 00:14:29.463 the first element of the languages, and then the name. 253 00:14:30.480 --> 00:14:33.380 And the same is actually gonna happen with the currencies, 254 00:14:34.230 --> 00:14:36.330 so we also have an array of the currencies, 255 00:14:36.330 --> 00:14:39.723 and then we want the name of the first one. 256 00:14:42.810 --> 00:14:47.810 So again, we want data.languages, the first element. 257 00:14:49.440 --> 00:14:51.873 And from there we want the name, 258 00:14:54.000 --> 00:14:56.493 and the same with the currencies. 259 00:14:59.460 --> 00:15:04.460 Currencies now, and that should be it. 260 00:15:04.890 --> 00:15:08.250 And now all we have to do is to then actually insert 261 00:15:08.250 --> 00:15:10.863 this HTML into our page. 262 00:15:12.780 --> 00:15:15.513 So I actually already have it here selected, 263 00:15:16.590 --> 00:15:21.270 but just to make it complete let me show it to you. 264 00:15:21.270 --> 00:15:23.970 So we have this countries element here, 265 00:15:23.970 --> 00:15:26.493 and so that's what I call the countries container. 266 00:15:28.260 --> 00:15:33.260 And so here we want country.insertAdjacentHTML beforeend, 267 00:15:39.390 --> 00:15:41.883 and then the html that we just created. 268 00:15:42.870 --> 00:15:45.490 Now, finally, we also need to set the style 269 00:15:46.680 --> 00:15:48.993 of this container to opacity one, 270 00:15:49.920 --> 00:15:54.303 so let me show you that one also in the code. 271 00:15:56.190 --> 00:15:59.610 So I set the opacity of the countries container 272 00:15:59.610 --> 00:16:02.670 here to zero, and so now we set it to one 273 00:16:02.670 --> 00:16:05.610 so that we can then see a nice animation, 274 00:16:05.610 --> 00:16:07.960 which is gonna be triggered by this transition. 275 00:16:09.060 --> 00:16:12.300 Okay, first let's give us some space 276 00:16:12.300 --> 00:16:13.923 so we can then actually see it. 277 00:16:15.990 --> 00:16:18.600 And so as I just said, we need to say 278 00:16:18.600 --> 00:16:23.600 countriesContainer.style.opacity, and set it to one. 279 00:16:27.900 --> 00:16:31.200 And now, as I save it, the data should appear. 280 00:16:31.200 --> 00:16:32.703 And it does. 281 00:16:34.020 --> 00:16:37.230 So that's amazing, right? 282 00:16:37.230 --> 00:16:40.653 And it looks just like here in our demo, 283 00:16:41.880 --> 00:16:43.710 so that's fantastic. 284 00:16:43.710 --> 00:16:47.130 I really love it when it works just like this. 285 00:16:47.130 --> 00:16:49.900 So getting data from some third-party API 286 00:16:50.760 --> 00:16:52.503 really feels like magic to me. 287 00:16:54.060 --> 00:16:57.840 Now, let's actually reuse the same code here 288 00:16:57.840 --> 00:17:02.310 to create an element like this for multiple countries. 289 00:17:02.310 --> 00:17:03.900 And so what I'm gonna do 290 00:17:03.900 --> 00:17:06.933 is to put all of this into a function. 291 00:17:08.640 --> 00:17:10.293 Let's call it getCountryData. 292 00:17:11.730 --> 00:17:13.330 And so this one will take 293 00:17:14.820 --> 00:17:18.473 a string as an input of a country, okay? 294 00:17:21.780 --> 00:17:24.573 So curly brace down here, 295 00:17:25.950 --> 00:17:28.830 and then here, instead of hardcoding Portugal, 296 00:17:28.830 --> 00:17:32.313 we will use that country that we get as an input. 297 00:17:37.470 --> 00:17:40.383 All right, country. 298 00:17:41.220 --> 00:17:44.733 And now down here we can then call this function, 299 00:17:45.900 --> 00:17:47.250 getCountryData('portugal'). 300 00:17:52.110 --> 00:17:56.490 So let's see. And, yeah, that worked just the same. 301 00:17:56.490 --> 00:17:57.990 And now let's try another one. 302 00:17:59.010 --> 00:18:01.830 So let's try the United States of America, 303 00:18:01.830 --> 00:18:03.603 just like I had it in my demo. 304 00:18:04.740 --> 00:18:06.873 And here we go. 305 00:18:08.160 --> 00:18:10.623 So now we have data about two countries. 306 00:18:11.460 --> 00:18:14.850 And by calling these functions here twice, 307 00:18:14.850 --> 00:18:17.100 we will basically have two Ajax calls 308 00:18:17.100 --> 00:18:19.200 happening at the same time, 309 00:18:19.200 --> 00:18:21.630 so in parallel, so to say. 310 00:18:21.630 --> 00:18:24.903 And if we reload this page here a couple of times, 311 00:18:26.490 --> 00:18:28.980 then they might appear in a different order. 312 00:18:28.980 --> 00:18:31.170 And the reason for that is basically 313 00:18:31.170 --> 00:18:34.560 that the data arrives at a slightly different time 314 00:18:34.560 --> 00:18:37.110 each time that we're loading the page. 315 00:18:37.110 --> 00:18:39.540 And so, in fact, this really shows 316 00:18:39.540 --> 00:18:42.300 the non-blocking behavior in action. 317 00:18:42.300 --> 00:18:46.470 So as we call getCountryData here with Portugal 318 00:18:46.470 --> 00:18:50.310 for the very first time, it sends off this request, 319 00:18:50.310 --> 00:18:53.670 and then JavaScript moves on in the code right away. 320 00:18:53.670 --> 00:18:56.910 And so it goes right here to this next line. 321 00:18:56.910 --> 00:18:58.590 And this, of course, fires off 322 00:18:58.590 --> 00:19:00.900 another Ajax call immediately, 323 00:19:00.900 --> 00:19:04.920 way before the data of Portugal has actually arrived. 324 00:19:04.920 --> 00:19:07.860 So, again, we will have two Ajax calls happening 325 00:19:07.860 --> 00:19:11.670 at the same time, and so whatever one arrives first 326 00:19:11.670 --> 00:19:15.420 will then fire the load event first. 327 00:19:15.420 --> 00:19:19.560 And so if the first one is the Ajax call for the USA, 328 00:19:19.560 --> 00:19:23.250 well, then the first element that's gonna be printed here 329 00:19:23.250 --> 00:19:26.250 will, of course, be the one from the USA. 330 00:19:26.250 --> 00:19:29.130 And only after that, the data for Portugal arrives, 331 00:19:29.130 --> 00:19:31.230 and then this callback function here 332 00:19:31.230 --> 00:19:34.260 is called with the data of Portugal. 333 00:19:34.260 --> 00:19:36.120 And, of course, the same would be true 334 00:19:36.120 --> 00:19:37.920 no matter how many other requests 335 00:19:37.920 --> 00:19:39.333 we would fire off here. 336 00:19:42.090 --> 00:19:44.820 Let's say Germany here. 337 00:19:44.820 --> 00:19:49.230 And so now we actually got the data in the same order, 338 00:19:49.230 --> 00:19:52.710 but now it's actually completely different. 339 00:19:52.710 --> 00:19:56.640 And so this confirms what I just explained before. 340 00:19:56.640 --> 00:19:59.550 Now, if we actually wanted these requests 341 00:19:59.550 --> 00:20:04.140 to be made in a specific, predefined order, 342 00:20:04.140 --> 00:20:07.590 then we would basically have to chain the requests, 343 00:20:07.590 --> 00:20:10.020 which means to make the second request 344 00:20:10.020 --> 00:20:13.710 only after the first request has finished. 345 00:20:13.710 --> 00:20:16.560 And that's actually what we're gonna do in the next lecture, 346 00:20:16.560 --> 00:20:18.330 so that I can show you something 347 00:20:18.330 --> 00:20:21.123 that we developers call callback hell.