Hello, in the previous video, we've made a request to the Open Trivia API, we received the response.
We are sending it to the council, as you can see it here and now we're going to learn how to work with
the response.
So at this moment, we only have a piece of string, which is a JSON that we receive back from the service,
and now we're going to pass it.
But before we do this, I want to show you something very, very interesting.
Everything that we request from our page to an external service can be seen here in the network tab.
So as you can see, there's a call for an API, I'm going to refresh the page now, and if we go back
to the console, let's see, there's something to do with Sherlock Holmes in this question.
If I go to the network and I see this last request made.
Let me just put it a bit bigger like this, you can go on prevue and you can actually see the response
that came from this request and we can see it as a JavaScript object.
So as you can see, this is an object.
So we have two properties, response code and results.
Let's go inside results.
This is a list.
This is an array.
And now we have the first element of this array.
And here we have all the information.
We want to be able to present the question and the answers for the users.
So here we have the question and we have the incorrect answers and the correct answer.
In order to show this to the user, we're going to have to shuffle them so we can just makes the correct
answer with the incorrect ones if we go to Instagram to that first example I showed.
So let's go to Instagram.
I'm going to do the same thing here, so I'm just going to go to the inspector.
Let's go to network and now I'm going to search for JavaScript again.
So JavaScript.
As you can see, we received the results and we can see many calls to the API here.
These have been canceled, as you can see the status, just because when we start typing, it already
initiates the request.
But then we keep typing.
It cancels it.
And when we finished typing.
So this is probably the last one.
As you can see, we have the status.
Two hundred.
So let's click here if you go to preview.
Here you have the actual response and on preview is a better view to it's showing like a JavaScript
object where we can open things.
So it's better to analyze the response.
So we have that list.
So as you can see, we receive back some hash tags, places and users.
Those first four results here are users.
So if we go here, we have this position.
So position zero, let's see if it matches that first result.
So if we open it here, so here we have we have the username JavaScript that James, which is exactly
what is showing there.
We have the URL for the profile picture and many, many more information about each of these results.
So if I'm following those pages or not.
So all of this is used by Instagram to improve the usability of the website.
So I just thought it would be cool to show you this because every HTP request that is done from a website
can be seen from the network tab.
So you should always go here if you want to learn more about stuff, if you want to understand what's
going on behind the scenes.
So for now, we can go back to the console and we can start working on this response.
What we need to do here is just really simple stuff.
We just need to get what's interesting to us, which are the question and the answers, and we just
need to pass them so we can start working with them.
So let's go back to Visual Studio.
We are going to send the question to the council.
So let's right the question is.
And now let's try to isolate only the question, so how can we do this, let's create a variable called
question.
So for this, we're going to use the Jason.
Object, so, Jason, that pass to transform this into a JavaScript object.
Now we have the response text into a JavaScript object.
Actually, let's separate this.
Let's create a variable called response.
Object.
So now we know that we have that as an object and now let's create another one just for the question.
And now the question is going to be inside here, so let's go to the network tab to understand where
is the question inside this object.
So going back there, going to the network tab, let's see the preview here, so inside our object,
we will have a results.
Property, so.
Response object dot results, then inside it, we have an array with just one element, so we just need
to go inside the first one, which has the index of zero.
So zero.
Inside it, we have.
A property called question.
And now we should be able to isolate the question and send it to the council, so that's right.
The question is send a question to the council.
And let's test this.
I'm just going to go back to the console here.
Let's refresh the page.
And now, as you can see, we just got a brand new question from the API and we are showing it in the
console.
So when we start making our actual trivia game, we're going to show a question here in the middle of
the screen, a big one.
And we're going to present the answers down here so the user can guess the answer.
Every time we refresh the page, we're going to get a new question from the API.
So let's try it out now.
We have a different question.
Let's try again.
All right, so this is looking good.
Don't worry about these things at the moment, these are age HTML entities.
When we send this to our page, this is going to render correctly.
So now, just so we can practice a little bit, let's also show the answers down here.
So let's go back to Visual Studio Code.
And now that we have the response object, we already put the question inside a variable, let's do
the same thing with the answers.
So answers.
This is going to be an array, so the first thing we are going to do is just get this.
But now, instead of question, let's go back there.
Let's go to network.
So instead of the question, we want the incorrect answers.
And now we also need to include the correct answers so we can show all of them so we can do answers,
don't push, because if we go back there, we will see that we have an array here for the incorrect
answers, but for the correct answer.
This is just a string.
So we're going to add this element to this array.
And in order to do this, we can do answers that push and then we can do it like this.
Let's check the the correct name of the property.
So.
The name is correct, underscore and sir, let's copy this.
So now we are putting all the answers together.
And let's send it to the council as well.
So the answer's.
Ah, and then we can just present all the possible answers.
So by doing this, let's go back there, let's go back to the console, refresh the page.
And here it is, this is exactly what we're going to need when we start working on our project.
So here we have the question in what we're worth.
Screenshots added to steam have no idea what this is, but here we have all the answers.
We know that the correct answer in this case is always going to be the last one because we've just used
the push method.
So if we go to network.
Let's check the correct answer.
Which is 2011.
And this is always going to be at the end of the array, and this is a problem because if the last one
is always the correct one, then over time the user is going to notice this and our game is going to
become a really, really easy.
So every time we present the answers to the users.
We're going to have to shuffle this array, so the correct answer is always at a different position,
but this is something that we don't have to worry about right now.
All I wanted to do for the moment was being able to work with the response.
So we are getting the question.
We're getting the answers, which is really, really cool.
Before we go ahead, in the next video, we're going to talk about how to do AJAX requests using Jay
Quarrie because it's actually much easier than doing it with just plain JavaScript like we've been doing
here.
So let's see how we can do it with Jay Querrey.
And in our project, we are going to do everything using Jay Querrey.
So I'll see you in the next video.