And just like the other API project, once we're done with general setup now, of course, I would want
to get familiar with an API on this.
Probably will be one of the easiest APIs you have ever worked with, because essentially you just have
one endpoint that is this particular URL on line as far as the results, just get back the object.
That is the results.
So the property name is the result and then that is an array and then we're getting that specific person.
Now, if you want to set out.
Either from the API or you can grab the endpoint from the project set up and then once you copy and
paste, this is the result we are going to get.
So every time you refresh now, you should get a different user.
Of course, you can double check that by the first name and last name.
Now, one kind of annoying thing, which also is somewhat typical to external APIs, is the fact that
notice how nice that it is.
So this is what I was talking about when we were working on a basic project.
I was setting up the API just to make it easier.
A lot of times there's going to be two things that you're going to do with external APIs.
One thing you'll have to spend some time on going through documentation, which in this case, like
I said, is probably the easiest one where we simply have one endpoint and then we get the response.
And the second one is going to be figuring out, well, which properties are you looking for and then
where are they located and what kind of structuring you'll have to do.
Now, I'm not saying that it is extremely hard, but yes, it is the areas where you're like, OK,
so I want to display the street, but then Street is in location.
And then maybe also I would want to set up the city and hopefully get the gist.
So hopefully we are all on the same page where we're a random user.
We just need this particular URL, which, of course you will find already set up, and now we can start
pitching for our random users.
So I'm going to navigate back.
Like I said, here is the endpoint that we're looking for online.
Of course, I would want to set up my function that fetches the user.
Now I'm going to set it up, async right away.
So let's go with const get and I'm going to call this person in this case.
And since I would want to use a sync syntax.
All right.
Or set it up as a sync function.
And then I also can set up use effect and then say that in my callback function, of course I will invoke
it.
Now in this case though, I only want to invoke it when my app loads.
So that's why I'll just set up as far as dependency or the empty outline, what's involved that person.
And we're in good shape again.
We're going to use a built and fetch API.
So we simply say const response response is equal to fetch and then I'll pass in the URL.
And of course I would want to wait for that.
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
a white.
And we'll massage the response a bit, that's why we'll will invoke the Jassam function, and once we're
in this place, then of course, I know that I'm going to be getting back to results.
And more specifically, I would want to have a person meaning the first value in.
Now, if you want, of course, you can consult.
But I think in this case, it is going to be easier just to pass this YORO into the browser and you'll
clearly see what you're looking for.
So like I said, we get back the object.
Correct.
And then in the object we have the results.
And what we're looking for is this first item in that array.
So if I would want to assign something to the person variable, well, I simply need to go with the
variable name, which is going to be person and then data.
So, of course, that is the response that I'm getting back.
That is my object that I'm looking for my results.
All right.
And then I would want to get that first item.
And of course, since rates zero index based, that's why I say zero.
So now, of course, I'm pointing to this particular object.
And then what properties am I looking for?
Well, I would want to start with a phone and email.
And what's interesting about these ones, that they are right on the object.
Notice some of them are nested, for example, St Street.
I'm going to have to go in location or email and phone are directly on the object.
So what I'm doing over here is just think of an Pull-Out phone and then pull out email and that one
will be equal to the person since, of course, now I'm pointing to my object.
So that's the first step.
Then notice when we talk about the image.
So image is in the picture property.
Right.
And then more specifically, I am looking for this larger one.
And also I would probably want to rename it to the image.
So what do I need to do while I go with const?
So are of course structure it over here, I'll set it equal to the person and then that picture over
here.
So that's my object.
Now in that object I'm looking for a large property and then I would want to rename it.
So I will give it some kind of values.
And in this case I will call this image beautiful.
Now we have three of them.
Then I'm going to get my password and that one will be in the login.
So again, navigate back and we see we have a login and then we have the password.
So let's go with Consed and I'm going to go with login over here.
And then I'm looking for the password to login, and then since it is a nested object, which is good
password, and then this is coming from the person.
So please keep in mind there's multiple ways how we can write that.
But in this case, I just want to showcase how we can get nested or operate out of the object.
And then we have somewhat of annoying ones where we have, for example, first and last.
So I would want to combine them essentially.
I don't want to go with first and last name.
I would just want to say, hey, listen, get me the name.
But in order to get that first and last, of course, I would need to look into the name.
So, again, a little bit of annoying structuring where we go with const on first last and that one
is equal to person dot name.
So like I said, there's multiple ways.
How can the structure from that object.
This is one of them and this would be another set up.
You can use whichever method you prefer that is totally up to you.
So now I have my first and last and then I would want to get the edge and lastly, the street.
So let's go here with Consed and I'm looking for the date of birth like so.
And in this case I'm looking for the H.
Correct.
Again, it is nested.
So I go with date of birth, then more specifically age.
And that is coming from the person, of course, and then lastly, I would want to go straight now if
you're wondering, can you write everything in one line?
Yeah, definitely you can.
So I simply could have went with phone, email and then do all the structuring.
However, keep in mind that, of course, it might be a bit hard to read whatever I would have typed
here.
So that's why I just avoided that scenario.
That's why I'm starting every time a new one.
But can you write everything in one line?
Yeah, but I'm pretty sure that even if you typed out yourself, it's going to be somewhat hard to read
later on.
And then in this case, Street is even more interesting where I have the location and then I have the
street and what I'm looking for is the number and name.
So even more structuring.
So in this case, I will assign a two person location because I'm not the biggest fan of deep, deep,
deep, deep, deep nesting.
And here we're going to say that I'm looking for street property.
And inside of it, there's going to be a no no name.
OK, beautiful.
We say it.
And now I have those values.
Now, in order to make this easier for myself, what I would want is to create a new object.
So I'm going to go with a new person or here that is my object.
And then some properties.
I'm just going to get them the way they are right now.
And some of them I will combine, for example, first and last as well as the street.
So in here I'll say, yeah, there's going to be property and that one will be equal to my image.
Of course, again, we're just using this year's six feature where if the property name is equal to
the variable that holds the value, then of course we can just admit that.
So I'm going to go with image than phone, than email, than password and age as well.
And then this is going to be the case.
We're all set up two properties where I'm going to be combining the values.
So I'm going to go straight over here and ST will be equal to my strength where I'm going to say, get
me the number.
That's why I'm using template strings number and the name of the street.
And then lastly, of course, I'm going to copy and paste and this is going to be important name so
out of comma here.
And then we'll say that property name will be name and the values will be first and last week are some.
Let's set everything up.
And now of course I would want to go with that person.
Remember, by default it was now and I'll sign it to the new person.
Then loading, of course, will be false.
So set a loading and we'll set it equal to false.
So now we're not loading anymore.
And by the way, street is not defined.
I'm just and that line is, I believe, for sure.
And here as well, I can't get the street.
And of course, I needed to have a number and my apologies.
There is now everything should work.
We're not loading anymore.
But there's also two things I would want.
Make sure that these values represent of the name.
So remember all the value.
Well, I had the random person by default.
Correct.
But of course I'll change it to the actual name.
So whatever I have here in this object and I also want to change for sure this back to name maybe at
some point will change it as we're hovering over the buttons.
So since Howard won't always play it as a name once initially I load, I'm going to go with set title
and then I want to be equal to nine.
So it's always go back to my default.
And then as far as the value, since I always want I want to show the name as well of that particular
person, we're going to go set value and then new person that name.
So we save it.
And now of course we have my name is Hanlan, whatever is the name of the person.
And of course I can refresh and then I'm going to get something different.
So that should be our basic setup.
Now, the only thing that is missing is, of course, that once I click on a button.
I also would want to get that new user, not only when my applauds and we just simply need to scroll
down and set up unclick.
So we're going to be listening for click events.
And then once we click on a button, I would just want to invoke my get person hours.
Once you click address, you're getting these new users.
So that's the functionality that make sure that we get the user.
Now, of course, we can start working on the buttons.
And as always, when you work with external API.
Yes, like I said, two things.
We all have to get familiar with documentation so how we can get the data.
And then the second one is we'll have to make sure that we know how to pull out the correct data that
we're looking for.
And yes, once in a while, the rest will get tedious.
There's no way around it.