OK, so now that we have tested our API endpoint and we have like Chegg that we are receiving data from
this particular and.
So now we were checking it in the console, in our browser.
But now we want to grab that data in our application and we want to grab the values from the endpoint.
We're going to fetch the data and we want to use it or not.
And I did UI displayed in the UI.
So now let's do that.
So first of all, let me just show you that how the data looks like.
I love shown you before.
So this isn't that, but let me assure you, it looks a little cleaner.
So this is how the data we are receiving from the endpoint.
So this is an area and inside and this is an object inside that data classes and this is an area when
there is an array inside that we have objects, array of objects.
And this is a mean.
There's also an object.
So the data is something like this.
It's a little bit of scope and scatter, but now we have to like grab what data we want and that we
want to fight.
OK, so let's go ahead and do it.
So first of all, we want temperature, humidity and air pressure.
So where are they?
OK, so inside the main object that is the temperature will take the pressure and we'll take the humidity.
OK, so let's write code for that, for grabbing this, these values.
So we'll write the code below the like, the data where we knew that we are getting the data not only
to console, so we can just commented, but after that we can just delete it or after we got the data
in the JSON format like data will be a very good start, and that means the result would be converted
to Judaism and that then it would be stored in the data very well.
All right.
So now we will grab the data, so we'll pick up a constant and so that will be an object to her will,
right?
First of all, we want temperature, then we want the humidity.
Remember, these words need to be seen as the words which we do see from learning to play.
All right.
Because when I go, when I go in the browser and I see like temperature, you want the temperature,
we want the humidity and we were under pressure.
All right.
So this is temp pressure and we were doing this.
The like spelling must be seen, OK, temp, humidity and pressure and all this is equal to I mean,
this will be equal to data.
Dark mean.
Excellent.
Now let me show you why I have written data.
Dortmund don't get confused here because data document like data is going to this.
All of this is data.
All of this is data because all of this is in JSON format.
We have converted into JSON by restored Jason and then we have storage and data.
We'll get to all this data inside this.
We want the mean and this mean object inside this mean object.
We want some of the fields.
So that's why I have written restart.
Data like data not mean for data, and it's that the mean object.
All right.
Next, we want the like, how is the weather?
It's cloudy, sunny or whatever it is so that we want to first?
Let me check how that looks like here.
So that is mean that it is the main.
It turned out to mean is the type of girl that maybe it's the this is the mean who know it's it's it's
showing the rain like man is not justified.
You can give it another name too inside whether.
Inside together.
That we have there is an array inside the array, we have an object that we haven't named mean, OK,
so we want to grab this, the value of this mean.
All right.
OK, so I will change the name of this man because I mean, doesn't seem to be like justified.
OK, so cons, same as this.
Now we want to grab them in the mean, but we want to rename it so we can rename it by providing a new
name.
Mean is the original name, but providing the colon and after that, whatever value will provide.
So that will be the new name for this mean or mean class.
OK, so we'll provide.
Maybe we can write another type.
Another type.
Weather type used to be contrite, camel kissing and that type.
And this we want to grab from the, of course, from data and then there was a weather at a remember,
I will show you once again let me describe this first weather.
There was an arrest.
So are we on the first one?
OK, so then we'll proceed over.
But we were on the first one.
OK, let me show you again.
And here you can see that is whether this is an arrest.
You can see this grab bag.
This means an Audi and inside that we want to zero like the first first object of the first object.
OK, so that is the first one and inside that we want the mean.
All right.
OK.
Now next to.
We want the name name of the city.
OK, so name of the city would be in concert and here will provide the name.
Now from where we'll get the name because the name is not under any of the array or object name is here
down.
It's here.
It is not.
It is independent of all its just outside.
So inside the data, only we have to grab the name.
All right.
So we'll just try to name is equal to data, and that's from the data only will grab the name.
Now we want the we want the speed to wind speed.
And now let me first check registering speed.
So let's go to the browser and see you at at the speed that you see us on where speed?
I did not see yet.
So gay speed is here inside the ring object, we see the speed.
OK, then from the window, yeah, when someone will grab the speed.
Beauty is equal to.
Data not.
Of course, then we warned the country, and the point is the sunset times that also we'll check once
in the browser.
We want the country to increase in the face.
OK, inside the system.
But we have the country and we have the sunrise and sunset so you can provide anything.
Here we are using limited things.
You can use many of the things they are like sunrise, sunset.
Many will lose out here so you can provide.
And so we'll be using just sunset from here, who will be using the country name and the sunset.
So we'll use the quiet country and sunset.
OK.
So when we go ahead and when we grab the release, we will ride concert and object.
And he had a will right country.
That is the name of the country.
Then we'll take up this sunset value.
All right.
So now we will.
There it is present and the RS object.
So Datadog says, All right.
OK, so now that we have a grab all these values, we can just test it out like they are working or
not.
But before that, we need to pass it to our weather details card, right?
Whether it is because that is another component that is not here.
No, we had a we only have the search and search button.
The displaying part is done here in this weather details gorgeous.
So we need to pass the value positive data out here.
So first of all, we'll.
Will create an object that will contain all of this data, so will, first of all, let me create.
Another variable inside the use turtle, so that will be Konst, and it will be named as a weather like
temp in the fall, so we'll just provide.
In full and then we'll provide set.
Then in full.
And that will be U.S.
And.
The value to this will be like an empty object, empty object, because we are creating this is not
just a variable, there's not a like numerical value, something like that on a string.
This is a this is an empty object.
OK.
So end empty object.
This is like temp and floor is an empty object inside.
This will grab all these values.
All right.
So now now what we'll do is we'll fill this empty object like we provided like my.
New weather in info, we can just provide my new.
But the.
In full.
And this is an object.
Don't be confused with that is an object is an object called object.
All right.
So now we want to grab all of this, well, just right, one by one, all of these variables.
All of this class is right.
So for us to really grab the temp, then we'll grab the humidity.
Then we'll grab the pressure, then we'll grab the weather type.
Then we'll grab the name of the city, then we grab the speed of the wind.
Next, we'll take up the country like the name of the country.
And next we take up the sunset time over the sunset.
Let me just save it.
OK, so this is this looks like that.
Also, my cool word is refactored like automatically.
For that, I've installed an extension there that's called prettier.
So you can install that extension and whenever you save your light file.
So after the on save your light cord will be refactored and it will look like little beautiful.
All right.
So the court will be factored into look arranged.
OK, so now that we have a grab these values.
So let us just pass on to pass these values into that function.
So the third stamp in full and.
Will be containing this.
So I object, so my brother in law let go, that's all now this this.
Its object will be filled with all of that values, and all because of your past the bosrd inside that
function.
All right.
So this is the catch for catching another.
So now almost we are done with getting the data, but now we wonder displayed on this feather details
and we want to display their data on the UI part.
So we'll do it in the next spark.
So see in the next one.