1 00:00:00,330 --> 00:00:06,270 And just like the other API project, once we're done with general setup now, of course, I would want 2 00:00:06,270 --> 00:00:09,600 to get familiar with an API on this. 3 00:00:09,600 --> 00:00:17,100 Probably will be one of the easiest APIs you have ever worked with, because essentially you just have 4 00:00:17,310 --> 00:00:24,360 one endpoint that is this particular URL on line as far as the results, just get back the object. 5 00:00:24,660 --> 00:00:26,450 That is the results. 6 00:00:26,820 --> 00:00:33,210 So the property name is the result and then that is an array and then we're getting that specific person. 7 00:00:33,510 --> 00:00:35,040 Now, if you want to set out. 8 00:00:36,140 --> 00:00:43,640 Either from the API or you can grab the endpoint from the project set up and then once you copy and 9 00:00:43,640 --> 00:00:47,420 paste, this is the result we are going to get. 10 00:00:47,690 --> 00:00:52,180 So every time you refresh now, you should get a different user. 11 00:00:52,470 --> 00:00:56,850 Of course, you can double check that by the first name and last name. 12 00:00:57,410 --> 00:01:05,660 Now, one kind of annoying thing, which also is somewhat typical to external APIs, is the fact that 13 00:01:05,660 --> 00:01:07,250 notice how nice that it is. 14 00:01:07,670 --> 00:01:11,570 So this is what I was talking about when we were working on a basic project. 15 00:01:12,020 --> 00:01:15,280 I was setting up the API just to make it easier. 16 00:01:15,680 --> 00:01:21,780 A lot of times there's going to be two things that you're going to do with external APIs. 17 00:01:22,160 --> 00:01:28,820 One thing you'll have to spend some time on going through documentation, which in this case, like 18 00:01:28,820 --> 00:01:34,580 I said, is probably the easiest one where we simply have one endpoint and then we get the response. 19 00:01:34,940 --> 00:01:42,560 And the second one is going to be figuring out, well, which properties are you looking for and then 20 00:01:42,560 --> 00:01:46,590 where are they located and what kind of structuring you'll have to do. 21 00:01:47,000 --> 00:01:53,290 Now, I'm not saying that it is extremely hard, but yes, it is the areas where you're like, OK, 22 00:01:53,960 --> 00:01:57,890 so I want to display the street, but then Street is in location. 23 00:01:58,040 --> 00:02:02,150 And then maybe also I would want to set up the city and hopefully get the gist. 24 00:02:02,720 --> 00:02:07,700 So hopefully we are all on the same page where we're a random user. 25 00:02:07,910 --> 00:02:14,370 We just need this particular URL, which, of course you will find already set up, and now we can start 26 00:02:14,370 --> 00:02:17,370 pitching for our random users. 27 00:02:17,720 --> 00:02:19,100 So I'm going to navigate back. 28 00:02:19,300 --> 00:02:24,200 Like I said, here is the endpoint that we're looking for online. 29 00:02:24,500 --> 00:02:28,780 Of course, I would want to set up my function that fetches the user. 30 00:02:29,120 --> 00:02:32,030 Now I'm going to set it up, async right away. 31 00:02:32,300 --> 00:02:37,190 So let's go with const get and I'm going to call this person in this case. 32 00:02:37,520 --> 00:02:41,210 And since I would want to use a sync syntax. 33 00:02:41,510 --> 00:02:42,110 All right. 34 00:02:42,110 --> 00:02:44,270 Or set it up as a sync function. 35 00:02:44,600 --> 00:02:52,280 And then I also can set up use effect and then say that in my callback function, of course I will invoke 36 00:02:52,280 --> 00:02:52,430 it. 37 00:02:52,760 --> 00:02:57,400 Now in this case though, I only want to invoke it when my app loads. 38 00:02:57,710 --> 00:03:05,300 So that's why I'll just set up as far as dependency or the empty outline, what's involved that person. 39 00:03:05,540 --> 00:03:07,760 And we're in good shape again. 40 00:03:07,770 --> 00:03:10,460 We're going to use a built and fetch API. 41 00:03:10,880 --> 00:03:19,880 So we simply say const response response is equal to fetch and then I'll pass in the URL. 42 00:03:20,240 --> 00:03:22,120 And of course I would want to wait for that. 43 00:03:22,130 --> 00:03:29,480 So I'll go with a white van, I'll take a look at my data, some data, and then we're going to go with 44 00:03:29,480 --> 00:03:29,930 a white. 45 00:03:31,060 --> 00:03:37,900 And we'll massage the response a bit, that's why we'll will invoke the Jassam function, and once we're 46 00:03:37,900 --> 00:03:41,830 in this place, then of course, I know that I'm going to be getting back to results. 47 00:03:42,130 --> 00:03:47,520 And more specifically, I would want to have a person meaning the first value in. 48 00:03:48,160 --> 00:03:50,280 Now, if you want, of course, you can consult. 49 00:03:50,440 --> 00:03:58,180 But I think in this case, it is going to be easier just to pass this YORO into the browser and you'll 50 00:03:58,180 --> 00:03:59,830 clearly see what you're looking for. 51 00:04:00,070 --> 00:04:01,780 So like I said, we get back the object. 52 00:04:02,170 --> 00:04:02,620 Correct. 53 00:04:02,950 --> 00:04:05,870 And then in the object we have the results. 54 00:04:06,430 --> 00:04:10,630 And what we're looking for is this first item in that array. 55 00:04:11,050 --> 00:04:17,710 So if I would want to assign something to the person variable, well, I simply need to go with the 56 00:04:17,710 --> 00:04:21,020 variable name, which is going to be person and then data. 57 00:04:21,550 --> 00:04:24,340 So, of course, that is the response that I'm getting back. 58 00:04:24,340 --> 00:04:28,190 That is my object that I'm looking for my results. 59 00:04:28,240 --> 00:04:28,740 All right. 60 00:04:28,990 --> 00:04:32,050 And then I would want to get that first item. 61 00:04:32,620 --> 00:04:36,970 And of course, since rates zero index based, that's why I say zero. 62 00:04:37,180 --> 00:04:41,140 So now, of course, I'm pointing to this particular object. 63 00:04:41,320 --> 00:04:43,540 And then what properties am I looking for? 64 00:04:44,080 --> 00:04:48,270 Well, I would want to start with a phone and email. 65 00:04:48,640 --> 00:04:53,720 And what's interesting about these ones, that they are right on the object. 66 00:04:54,050 --> 00:04:58,710 Notice some of them are nested, for example, St Street. 67 00:04:58,720 --> 00:05:05,630 I'm going to have to go in location or email and phone are directly on the object. 68 00:05:06,040 --> 00:05:13,450 So what I'm doing over here is just think of an Pull-Out phone and then pull out email and that one 69 00:05:13,450 --> 00:05:17,970 will be equal to the person since, of course, now I'm pointing to my object. 70 00:05:18,340 --> 00:05:19,510 So that's the first step. 71 00:05:19,990 --> 00:05:22,890 Then notice when we talk about the image. 72 00:05:23,290 --> 00:05:27,220 So image is in the picture property. 73 00:05:27,370 --> 00:05:27,790 Right. 74 00:05:28,180 --> 00:05:32,260 And then more specifically, I am looking for this larger one. 75 00:05:32,710 --> 00:05:36,510 And also I would probably want to rename it to the image. 76 00:05:36,790 --> 00:05:40,360 So what do I need to do while I go with const? 77 00:05:40,630 --> 00:05:48,650 So are of course structure it over here, I'll set it equal to the person and then that picture over 78 00:05:48,680 --> 00:05:48,910 here. 79 00:05:48,920 --> 00:05:49,830 So that's my object. 80 00:05:50,080 --> 00:05:55,870 Now in that object I'm looking for a large property and then I would want to rename it. 81 00:05:56,140 --> 00:05:58,610 So I will give it some kind of values. 82 00:05:58,780 --> 00:06:01,900 And in this case I will call this image beautiful. 83 00:06:02,140 --> 00:06:03,850 Now we have three of them. 84 00:06:04,330 --> 00:06:08,380 Then I'm going to get my password and that one will be in the login. 85 00:06:08,860 --> 00:06:14,380 So again, navigate back and we see we have a login and then we have the password. 86 00:06:14,800 --> 00:06:20,350 So let's go with Consed and I'm going to go with login over here. 87 00:06:21,520 --> 00:06:27,250 And then I'm looking for the password to login, and then since it is a nested object, which is good 88 00:06:27,490 --> 00:06:31,090 password, and then this is coming from the person. 89 00:06:31,450 --> 00:06:35,020 So please keep in mind there's multiple ways how we can write that. 90 00:06:35,030 --> 00:06:42,040 But in this case, I just want to showcase how we can get nested or operate out of the object. 91 00:06:42,490 --> 00:06:48,810 And then we have somewhat of annoying ones where we have, for example, first and last. 92 00:06:49,180 --> 00:06:51,830 So I would want to combine them essentially. 93 00:06:52,120 --> 00:06:54,010 I don't want to go with first and last name. 94 00:06:54,190 --> 00:06:56,740 I would just want to say, hey, listen, get me the name. 95 00:06:57,040 --> 00:07:01,280 But in order to get that first and last, of course, I would need to look into the name. 96 00:07:01,690 --> 00:07:11,290 So, again, a little bit of annoying structuring where we go with const on first last and that one 97 00:07:11,290 --> 00:07:14,270 is equal to person dot name. 98 00:07:14,530 --> 00:07:16,690 So like I said, there's multiple ways. 99 00:07:16,690 --> 00:07:18,980 How can the structure from that object. 100 00:07:19,390 --> 00:07:23,170 This is one of them and this would be another set up. 101 00:07:23,170 --> 00:07:28,300 You can use whichever method you prefer that is totally up to you. 102 00:07:28,420 --> 00:07:34,920 So now I have my first and last and then I would want to get the edge and lastly, the street. 103 00:07:35,230 --> 00:07:42,850 So let's go here with Consed and I'm looking for the date of birth like so. 104 00:07:43,060 --> 00:07:45,670 And in this case I'm looking for the H. 105 00:07:45,670 --> 00:07:46,090 Correct. 106 00:07:46,340 --> 00:07:47,680 Again, it is nested. 107 00:07:47,680 --> 00:07:51,820 So I go with date of birth, then more specifically age. 108 00:07:52,980 --> 00:07:58,410 And that is coming from the person, of course, and then lastly, I would want to go straight now if 109 00:07:58,410 --> 00:08:01,320 you're wondering, can you write everything in one line? 110 00:08:01,740 --> 00:08:02,820 Yeah, definitely you can. 111 00:08:03,360 --> 00:08:08,710 So I simply could have went with phone, email and then do all the structuring. 112 00:08:08,710 --> 00:08:15,990 However, keep in mind that, of course, it might be a bit hard to read whatever I would have typed 113 00:08:15,990 --> 00:08:16,230 here. 114 00:08:16,470 --> 00:08:19,030 So that's why I just avoided that scenario. 115 00:08:19,290 --> 00:08:21,830 That's why I'm starting every time a new one. 116 00:08:21,960 --> 00:08:24,000 But can you write everything in one line? 117 00:08:24,030 --> 00:08:30,210 Yeah, but I'm pretty sure that even if you typed out yourself, it's going to be somewhat hard to read 118 00:08:30,390 --> 00:08:31,350 later on. 119 00:08:31,830 --> 00:08:39,780 And then in this case, Street is even more interesting where I have the location and then I have the 120 00:08:39,780 --> 00:08:43,670 street and what I'm looking for is the number and name. 121 00:08:44,070 --> 00:08:45,930 So even more structuring. 122 00:08:46,320 --> 00:08:54,060 So in this case, I will assign a two person location because I'm not the biggest fan of deep, deep, 123 00:08:54,060 --> 00:08:55,220 deep, deep, deep nesting. 124 00:08:55,730 --> 00:09:00,120 And here we're going to say that I'm looking for street property. 125 00:09:00,330 --> 00:09:05,900 And inside of it, there's going to be a no no name. 126 00:09:06,360 --> 00:09:07,410 OK, beautiful. 127 00:09:07,710 --> 00:09:08,510 We say it. 128 00:09:08,520 --> 00:09:09,810 And now I have those values. 129 00:09:10,200 --> 00:09:16,380 Now, in order to make this easier for myself, what I would want is to create a new object. 130 00:09:16,680 --> 00:09:20,370 So I'm going to go with a new person or here that is my object. 131 00:09:20,760 --> 00:09:22,380 And then some properties. 132 00:09:22,770 --> 00:09:25,080 I'm just going to get them the way they are right now. 133 00:09:25,350 --> 00:09:30,860 And some of them I will combine, for example, first and last as well as the street. 134 00:09:31,290 --> 00:09:37,410 So in here I'll say, yeah, there's going to be property and that one will be equal to my image. 135 00:09:37,530 --> 00:09:44,790 Of course, again, we're just using this year's six feature where if the property name is equal to 136 00:09:44,790 --> 00:09:48,700 the variable that holds the value, then of course we can just admit that. 137 00:09:48,720 --> 00:09:58,070 So I'm going to go with image than phone, than email, than password and age as well. 138 00:09:58,500 --> 00:10:00,030 And then this is going to be the case. 139 00:10:00,240 --> 00:10:05,190 We're all set up two properties where I'm going to be combining the values. 140 00:10:05,490 --> 00:10:12,660 So I'm going to go straight over here and ST will be equal to my strength where I'm going to say, get 141 00:10:12,660 --> 00:10:13,320 me the number. 142 00:10:13,560 --> 00:10:19,350 That's why I'm using template strings number and the name of the street. 143 00:10:21,030 --> 00:10:25,920 And then lastly, of course, I'm going to copy and paste and this is going to be important name so 144 00:10:25,920 --> 00:10:26,880 out of comma here. 145 00:10:27,660 --> 00:10:39,270 And then we'll say that property name will be name and the values will be first and last week are some. 146 00:10:39,270 --> 00:10:40,620 Let's set everything up. 147 00:10:40,890 --> 00:10:43,920 And now of course I would want to go with that person. 148 00:10:43,920 --> 00:10:48,180 Remember, by default it was now and I'll sign it to the new person. 149 00:10:49,350 --> 00:10:51,490 Then loading, of course, will be false. 150 00:10:51,870 --> 00:10:56,570 So set a loading and we'll set it equal to false. 151 00:10:56,850 --> 00:10:58,630 So now we're not loading anymore. 152 00:10:58,920 --> 00:11:01,500 And by the way, street is not defined. 153 00:11:01,830 --> 00:11:07,220 I'm just and that line is, I believe, for sure. 154 00:11:07,230 --> 00:11:09,060 And here as well, I can't get the street. 155 00:11:09,270 --> 00:11:14,070 And of course, I needed to have a number and my apologies. 156 00:11:14,100 --> 00:11:16,070 There is now everything should work. 157 00:11:16,320 --> 00:11:18,000 We're not loading anymore. 158 00:11:18,330 --> 00:11:21,690 But there's also two things I would want. 159 00:11:21,870 --> 00:11:26,150 Make sure that these values represent of the name. 160 00:11:26,610 --> 00:11:28,710 So remember all the value. 161 00:11:29,070 --> 00:11:31,140 Well, I had the random person by default. 162 00:11:31,140 --> 00:11:31,500 Correct. 163 00:11:31,830 --> 00:11:34,920 But of course I'll change it to the actual name. 164 00:11:35,250 --> 00:11:43,740 So whatever I have here in this object and I also want to change for sure this back to name maybe at 165 00:11:43,740 --> 00:11:46,830 some point will change it as we're hovering over the buttons. 166 00:11:47,160 --> 00:11:55,380 So since Howard won't always play it as a name once initially I load, I'm going to go with set title 167 00:11:55,770 --> 00:11:57,990 and then I want to be equal to nine. 168 00:11:58,200 --> 00:12:01,230 So it's always go back to my default. 169 00:12:01,440 --> 00:12:06,720 And then as far as the value, since I always want I want to show the name as well of that particular 170 00:12:06,720 --> 00:12:11,940 person, we're going to go set value and then new person that name. 171 00:12:12,300 --> 00:12:13,200 So we save it. 172 00:12:13,410 --> 00:12:19,860 And now of course we have my name is Hanlan, whatever is the name of the person. 173 00:12:20,310 --> 00:12:24,660 And of course I can refresh and then I'm going to get something different. 174 00:12:25,050 --> 00:12:27,000 So that should be our basic setup. 175 00:12:27,300 --> 00:12:32,220 Now, the only thing that is missing is, of course, that once I click on a button. 176 00:12:33,210 --> 00:12:39,600 I also would want to get that new user, not only when my applauds and we just simply need to scroll 177 00:12:39,600 --> 00:12:41,760 down and set up unclick. 178 00:12:41,920 --> 00:12:44,190 So we're going to be listening for click events. 179 00:12:44,460 --> 00:12:52,010 And then once we click on a button, I would just want to invoke my get person hours. 180 00:12:52,350 --> 00:12:56,930 Once you click address, you're getting these new users. 181 00:12:57,360 --> 00:13:01,650 So that's the functionality that make sure that we get the user. 182 00:13:01,980 --> 00:13:04,580 Now, of course, we can start working on the buttons. 183 00:13:04,860 --> 00:13:08,430 And as always, when you work with external API. 184 00:13:08,760 --> 00:13:11,580 Yes, like I said, two things. 185 00:13:11,970 --> 00:13:17,610 We all have to get familiar with documentation so how we can get the data. 186 00:13:17,910 --> 00:13:25,020 And then the second one is we'll have to make sure that we know how to pull out the correct data that 187 00:13:25,020 --> 00:13:25,620 we're looking for. 188 00:13:25,800 --> 00:13:29,340 And yes, once in a while, the rest will get tedious. 189 00:13:29,580 --> 00:13:31,500 There's no way around it.