WEBVTT 0 00:00.360 --> 00:09.030 So in previous lessons, we saw how we could fetch some data from an external server, and then get the 1 00:09.030 --> 00:15.990 data in the form of a JSON, and then parse it into an actual Javascript object, which we can dig through 2 00:16.220 --> 00:18.220 to get the pieces of data that we want. 3 00:18.870 --> 00:25.400 So now that we're able to log the data that we're interested in, the next step is putting it onto our web 4 00:25.400 --> 00:26.490 site. 5 00:26.490 --> 00:33.660 This will be a little bit of revision from our Node and Express modules. In order to pass the data back 6 00:33.690 --> 00:38.700 inside our app.get, we have to tap in to our response. 7 00:38.700 --> 00:45.360 This is the response that our server is going to send to the client’s browser. 8 00:45.360 --> 00:50.280 Now, in this case, the response could just be the data that we've got, 9 00:50.280 --> 00:50.580 right? 10 00:50.580 --> 00:55.400 So we could say res, which refers to this response. 11 00:55.410 --> 00:59.040 Now you see why I didn't want to name this res as well, right, 12 00:59.070 --> 01:03.320 because it would be mightily confusing which one I'm using. 13 01:03.450 --> 01:09.150 So res refers to our app.get response, and the response we’re going to give 14 01:09.150 --> 01:13.530 the browser is going to be a send method. 15 01:13.650 --> 01:24.570 So we're going to send the data that we've got. “The temperature in London is “, and then we'll tag on the 16 01:24.660 --> 01:33.130 temp at the end here, and then maybe we'll even add a degrees Celsius. 17 01:33.150 --> 01:39.690 Now remember that, if we run our code as it is right now, it's going to crash, because we can only have 18 01:39.720 --> 01:46.050 one res.send in any given one of these app methods. 19 01:46.230 --> 01:52.680 So we can't send here and then send here, because once we call send, then that's basically the end. There’s 20 01:52.680 --> 01:55.340 no more sense going forwards. 21 01:55.340 --> 02:00.690 And if you do try to do that, you'll end up with an error that says something like this, “Cannot set headers 22 02:00.720 --> 02:05.700 after they're sent to the client. Error HTTP headers sent.” Something like this. 23 02:05.700 --> 02:10.830 Instead we're going to delete this previous send, hit save, 24 02:10.830 --> 02:17.640 and now, when we refresh our web site, you can see we're actually getting the data, and we're displaying 25 02:17.640 --> 02:19.100 it in the web site. 26 02:19.170 --> 02:24.230 The temperature in London is 6.27 degrees Celsius. 27 02:24.250 --> 02:31.660 Here's a question. How can we send this as a h1 instead of just a piece of text like this? 28 02:31.660 --> 02:37.010 Pause the video and see if you remember how to change it. 29 02:37.060 --> 02:37.360 All right. 30 02:37.390 --> 02:44.060 So we can actually write HTML in our res.send or our res.write. 31 02:44.110 --> 02:50.070 So all we have to do is just to wrap the final string inside a h1 tag, 32 02:50.200 --> 02:54.280 so the h1 beginning tag and the h1 end tag. 33 02:54.280 --> 03:00.730 Now if we go back and we hit refresh, then we actually get it displayed and formatted in the way that 34 03:00.730 --> 03:03.290 we want. 35 03:03.630 --> 03:05.670 Here's your challenge. 36 03:05.670 --> 03:10.470 See if you can remember how we can also send the weather description, 37 03:10.470 --> 03:15.980 so something like, “The weather is currently “, plus the weather description. 38 03:16.140 --> 03:20.670 But remember that we can only have one res.send, because that's the end, 39 03:20.700 --> 03:23.120 that’s the final thing that happens. 40 03:23.160 --> 03:34.470 So see if you remember how you can do this. Pause the video and try to complete this challenge. 41 03:34.650 --> 03:34.890 All right. 42 03:34.950 --> 03:41.400 So we know that we can only have one res.send, but we can have multiple res.write, 43 03:41.430 --> 03:41.770 right? 44 03:42.210 --> 03:50.640 So we're going to wrap this inside a res.write, and we're going to then wrap this inside another 45 03:50.640 --> 03:52.140 res.write, 46 03:52.170 --> 04:00.000 and finally we're going to call res.send once we've written all the things that we want to send. 47 04:00.360 --> 04:08.580 And our weather description is probably going to go in as maybe a paragraph, or it could be a h3, 48 04:08.880 --> 04:11.070 depending on what it is that you want. 49 04:11.070 --> 04:16.470 So now when we refresh you can see “The weather is currently overcast clouds. The temperature in London 50 04:16.470 --> 04:23.280 is 6.25 degrees”, and we've now been able to send multiple lines of HTML using our res. 51 04:23.280 --> 04:33.020 write in combination with our res.send. The final thing that I want to display in here is an image. 52 04:33.020 --> 04:40.790 And if we go back to the API for OpenWeatherMap, you can see that they actually have a bunch of condition 53 04:40.790 --> 04:49.190 codes in their API. The weather condition codes are these ones here, the ID of the weather, and they 54 04:49.190 --> 04:55.730 correspond to different weather conditions, whether if it's a thunderstorm, or drizzle, or rain, or snow, 55 04:55.870 --> 05:05.270 etc. But we also get back an icon name, and that icon name corresponds to the weather condition as an 56 05:05.270 --> 05:12.950 image, and OpenWeatherMap actually provides all of the images for all of the icons that they send you. 57 05:12.950 --> 05:15.980 All you have to do is just fetch it like so. 58 05:16.040 --> 05:24.950 So say if the icon was 10d, then you would insert this 10d into this URL to get the image, and leave 59 05:25.040 --> 05:32.630 everything else as it is. And the image would look a bit like this, which we can use display into our 60 05:32.630 --> 05:33.140 web site. 61 05:33.890 --> 05:40.900 So let's see if you can figure out how to get hold of the icon from our weather data. 62 05:40.920 --> 05:43.330 Pause the video and try to complete that challenge. 63 05:45.960 --> 05:52.240 All right. So it's pretty simple, because we already know how to get the description. Then the icon is 64 05:52.240 --> 05:58.080 as easy as taking all of this, and then just getting hold of the icon at the very end. 65 05:58.090 --> 06:05.170 Now the alternative is, of course, you could have also just copied the path here and pasted the path in 66 06:05.380 --> 06:06.410 as well. 67 06:06.550 --> 06:11.870 But once we've gotten the name of the icon, we have to create the image URL, 68 06:12.010 --> 06:15.130 and this comes from our API here. 69 06:15.880 --> 06:22.420 And so I'm just going to copy this entire URL, and paste it in here as a string. And then, instead of 70 06:22.420 --> 06:31.300 using this part, which is the icon ID, I'm going to add it in by using string concatenation. 71 06:31.900 --> 06:36.140 And of course I'm going to insert the icon that came from here. 72 06:36.310 --> 06:42.250 Now that we've got the image URL, we're going to write another res.write, 73 06:42.340 --> 06:46.480 and this one is going to contain a image element. 74 06:46.480 --> 06:54.340 So pause the video and see if you can send back to the browser an image element that will display this 75 06:54.400 --> 06:58.780 image URL. 76 06:58.940 --> 06:59.190 All right. 77 06:59.220 --> 07:02.540 So we're going to again be using res.write, 78 07:02.550 --> 07:10.330 and in this case though, we've got an image element that we're going to create. Now images are self closing 79 07:10.330 --> 07:13.110 tags, so we don't need to close off the tag, 80 07:13.240 --> 07:19.140 but what we do need is a source, and the source is going to go right here. 81 07:19.240 --> 07:23.410 So let's pass in our image URL and hit save. 82 07:23.420 --> 07:29.370 And now when we refresh our web site, you can see the corresponding image is now picked up. 83 07:29.410 --> 07:32.840 Now we've got our live weather condition, 84 07:33.010 --> 07:41.810 temperature, and even the condition image being displayed in our web site, and that's all thanks to 85 07:41.810 --> 07:50.630 us being able to get live data using an API, making a HTTP get request to get the data as a JSON format, 86 07:51.140 --> 07:58.520 parsing it and fetching the specific items that we want, and then sending it back to the browser using 87 07:58.720 --> 08:04.010 the HTML that we want to write. Now in the next lesson, 88 08:04.050 --> 08:11.150 I want to show you how we can make a post request from the web site, so that the user could log onto 89 08:11.160 --> 08:17.400 our web site, type in a particular city that they're interested in, and then we can give them the actual 90 08:17.400 --> 08:19.710 weather for that city. 91 08:19.710 --> 08:22.890 So for all of that and more, I'll see you on the next lesson.