1
00:00:02,290 --> 00:00:04,000
So let's work on this

2
00:00:04,000 --> 00:00:06,510
URL here or on this path

3
00:00:06,940 --> 00:00:11,520
and here we now want to retrieve the data for a given ID

4
00:00:11,590 --> 00:00:18,400
because the idea is that on the frontend, on my-place.js, we now no longer parse the coordinates and

5
00:00:18,400 --> 00:00:24,660
the address from the URL params, instead on the query params,

6
00:00:24,820 --> 00:00:31,090
we will of course find such a location key and that will hold the location ID which we want to look

7
00:00:31,090 --> 00:00:33,360
up on our backend server.

8
00:00:33,370 --> 00:00:40,170
So here, we get our locId by using query params get location,

9
00:00:40,180 --> 00:00:41,870
that's the key name we use there

10
00:00:42,160 --> 00:00:50,710
and then we want to send a fetch request here to http://localhost:3000 in this case,

11
00:00:52,390 --> 00:00:53,230
/location,

12
00:00:53,290 --> 00:00:56,130
that's the path we're setting up here on the backend,

13
00:00:56,320 --> 00:01:05,190
so slash location and then here, I want to add this ID somehow to the URL. Now we could add

14
00:01:05,190 --> 00:01:11,640
a query parameter but we actually can also add it as an extra path segment, we can add extra slash here

15
00:01:11,910 --> 00:01:13,790
and then append locId.

16
00:01:14,250 --> 00:01:19,690
Now we're sending a get request to this URL where the ID is actually part of the URL,

17
00:01:19,830 --> 00:01:26,550
so this will be something like this URL and then some random ID thereafter. Now

18
00:01:26,800 --> 00:01:28,990
then we'll get back some response

19
00:01:28,990 --> 00:01:37,120
and just as before, we should return the parsed response, the JSON data, the parsed JSON data

20
00:01:37,120 --> 00:01:46,040
and then we get the ultimate data in here in this second then block. It's then here where I want to create

21
00:01:46,040 --> 00:01:51,920
my new loaded place with that extracted data and we'll have to see how we extract that as soon as

22
00:01:51,920 --> 00:01:53,780
we know what we send back.

23
00:01:53,780 --> 00:01:59,390
Let's now go back to the backend though, there we will get a URL which contains the ID as part

24
00:01:59,450 --> 00:02:07,310
of the URL. Express.js is able to handle this, we can add an extra segment here to the path for which

25
00:02:07,310 --> 00:02:13,400
we filter where we tell Express.js that we have a dynamic segment, so one which is not always the

26
00:02:13,400 --> 00:02:19,640
same value but which changes. We do that by adding a colon here and then any identifier of your choice,

27
00:02:19,910 --> 00:02:25,730
for example lid for location ID but again, you can name this however you want, the colon is important

28
00:02:25,730 --> 00:02:26,810
though.

29
00:02:26,810 --> 00:02:35,060
Now this tells Express that we filter for get requests to /location/something and now in

30
00:02:35,060 --> 00:02:43,330
here, we can retrieve that location ID by going to request.params, there is a params object in

31
00:02:43,330 --> 00:02:49,150
there, Express.js provides this to you and this will now have a lid key because I have lid up there,

32
00:02:49,270 --> 00:02:53,330
if you chose a different identifier here, you have to extract the different one down there,

33
00:02:53,500 --> 00:02:59,440
this will be the data which is part of the URL, this segment which is part of the URL. With that

34
00:02:59,440 --> 00:03:05,110
we can now go to our location storage which will not be cleared as long as we don't restart the server

35
00:03:05,350 --> 00:03:13,000
or we're running out of memory, to get our location by that ID. So in there, we have math random as ID

36
00:03:13,060 --> 00:03:18,160
which is a number, what we get here will be a string because whatever you encode in the URL will be

37
00:03:18,160 --> 00:03:23,410
a string, so we'll actually convert it to a number by adding a plus here and then we can find this here

38
00:03:23,530 --> 00:03:31,740
in our locations array. So the location can be found by reaching out to location storage.locations and

39
00:03:31,750 --> 00:03:37,660
then we can use the find method which exists on arrays in Node.js just as it does on the client side

40
00:03:38,940 --> 00:03:41,280
and here we learned how that works,

41
00:03:41,280 --> 00:03:46,210
this runs on every item in the array, so on every location

42
00:03:46,210 --> 00:03:49,040
and I want to return true if we found the right location,

43
00:03:49,080 --> 00:03:54,870
so I want to return true if loc.Id is equal to location ID, then I know I have the right location

44
00:03:55,110 --> 00:03:56,990
and we store this here in this location

45
00:03:57,000 --> 00:04:04,640
object. Now if location is falsy and this also works just as on the client side because this is

46
00:04:04,640 --> 00:04:10,770
a default Javascript feature, this whole falsy, truthy if check thing, so we can check for falseness,

47
00:04:10,790 --> 00:04:18,650
If that's the case then I actually want to send back a JSON response where I set my own status code,

48
00:04:19,460 --> 00:04:22,550
status code with the status method of 404,

49
00:04:22,550 --> 00:04:24,230
we can simply chain these two methods

50
00:04:24,260 --> 00:04:29,210
and with that we first set a status code and then we can add some extra data where we maybe add

51
00:04:29,210 --> 00:04:31,790
a message of not found.

52
00:04:31,790 --> 00:04:37,790
So with that, we return an error response to the frontend and then we can do whatever we want with that

53
00:04:37,790 --> 00:04:38,820
information there,

54
00:04:38,960 --> 00:04:44,990
I just want to set this extra status code with the status method so that we have a chance to find out

55
00:04:44,990 --> 00:04:47,870
whether we succeeded or not on the frontend

56
00:04:48,230 --> 00:04:49,780
and I will return this

57
00:04:49,790 --> 00:04:52,390
so that we execute no code after this

58
00:04:52,580 --> 00:04:54,260
because after this if check,

59
00:04:54,350 --> 00:04:56,180
I want to run the code which we run

60
00:04:56,180 --> 00:05:03,160
if we found a location and in this case, I want to send the response with the JSON method.

61
00:05:03,230 --> 00:05:08,780
We could add a status code here as well but 200 is the status code, the default status code anyways so

62
00:05:08,780 --> 00:05:10,300
we don't have to do that

63
00:05:10,370 --> 00:05:17,240
and here of course I want to provide my location data so we can set an address here by accessing location.address

64
00:05:17,240 --> 00:05:23,690
because when we store a location here, we store an object which has the address field and

65
00:05:23,690 --> 00:05:25,170
a coords field,

66
00:05:25,280 --> 00:05:30,920
so we send back an address and then maybe coordinates where we refer to location.coords,

67
00:05:30,920 --> 00:05:37,990
so to this coords field we're storing up there and now this is sent back to the client,

68
00:05:38,000 --> 00:05:43,850
now let's restart our Node server here and on the client side, we now can also tweak this code a little

69
00:05:43,850 --> 00:05:50,630
bit and to provide the coords to the loaded place, we can access data.coordinates because we will

70
00:05:50,630 --> 00:05:56,370
send back a coordinates key here which holds an object with lat and lng which is just what we need,

71
00:05:56,480 --> 00:06:02,480
so we access coordinates on the return data and data.address for the address.

72
00:06:02,480 --> 00:06:07,690
Now we might get a status code which is 404 if we have no place,

73
00:06:07,730 --> 00:06:14,240
so in this case here I want to check if response.status is equal to 404, in which case I know we

74
00:06:14,240 --> 00:06:20,240
didn't find a location and in that case I want to throw a new error here where I say could not find

75
00:06:20,360 --> 00:06:24,710
location and then add a catch block after the last

76
00:06:24,710 --> 00:06:30,920
then block where I catch any errors like this one, where I simply show an alert with that error message

77
00:06:30,920 --> 00:06:31,570
to the user.

78
00:06:33,070 --> 00:06:40,150
Now with all of that, let's save that and first of all store a new place because I restarted the node

79
00:06:40,150 --> 00:06:45,370
server, so our old place will be lost for now. Find that place

80
00:06:45,760 --> 00:06:47,800
and now let's share that place,

81
00:06:47,800 --> 00:06:53,950
let's copy the URL and enter this here and that looks pretty good to me and it's coming from a

82
00:06:53,950 --> 00:06:54,700
server

83
00:06:54,810 --> 00:06:59,490
and if we enter an invalid ID here, we get could not find a location.

84
00:06:59,710 --> 00:07:07,390
So that is working as it should with our basic REST API here where we send requests to the backend and

85
00:07:07,390 --> 00:07:13,780
we handle them there with different routes for the moment to then just store them in our temporary memory

86
00:07:13,780 --> 00:07:14,470
storage here.