This lesson, we applied some styling as well as we made multiple requests, we, instead of fetch,
requested another fetch request and returning back the answer information as well as the contents of
the original question ID.
And this is all dynamically loaded from the API and all using JavaScript to load that content.
In the previous lesson we set up and we're pulling in information from the API and then we've got a
clickable element that passes over the question ID and outputs that into the console.
So once we have the question ID, we can use that.
So there is a way to query within the API and return back the question content and we can close off
some of these tabs that we have here.
So this is the API and we can use this API to generate the ULS.
So we've got a question.
And so the question and then if we use the question ideas, we can also pull back the answers that are
corresponding to the question IDs.
And that's what we want to list out is the answers.
So in this case, we see we've got this as an ID.
So in this case, let's clear that click the first one.
And this one has five answers.
So we're on a list.
The question details, but also the answers there so we can paste the actual we got a copy that just
the ID value and that produces the endpoint for us.
And if you run the endpoint, this is going to list out all of the answers for that particular question.
So it's going to be the path that we want to use so you can construct it with the API and then add in
the answers here.
And this will give us a way to build that.
You are able to make the request.
So just as we did before where we set up the base, you are all and we're doing the loading of the page.
We can load the content here.
So we've got our base you URL, we've got the ID that we want to use here and let's replace the content
with the ID value that we want.
So you can also update some of these other parameters if you want.
And the ID that we want to use is contained within the string here.
So update it so we can dynamically set the ID value and then we make the fetch request.
And right now we don't want to output the content yet.
So we just want to go to the console log and see the data so that we can deconstruct the data and plan
how we're going to use it on the page.
So clear the content and do a refresh.
So look for ones that do have answers.
So when we click that, we return back the array and this is going to be the array of items and within
the items, it's got an answer ID for whatever the question ID was.
And this one has this one has 13 answers.
So this one is going to be a better representation.
So it's got all of these as answers to the question.
So I want to do is want to open up a separate page and build the results, getting the question information,
but also returning back the answer information as well.
So there's a number of ways that we can do this where one is that we can query again to get the question
information.
So if we query and return back, the question results.
So in this case, we've got this as the ID and go back and get questions and get the questions according
to the ID.
So this is going to return back to the question information so we could make a separate query and get
the question information.
So let's do that where we got your URL to or your real one, and then use the base, your URL and then
add to the base your URL, the path for the question content.
In addition, we had Posehn because we already got the question content so we could potentially load
that into an array as well.
So depending on how we want to do that, there's a number of options that are available for us.
So this would be the path to get the question details.
So let's load first.
The first you URL actually let's change the order because we want to load the question details after
we complete loading the main URL content.
So loading the Eurail one first and then when we complete that one, we make another fetch request that
we're going to load the second you URL.
So let's refresh that.
And it looks like there there was a path problem here with our API and we did end up with it again.
So that's where that error was coming from.
So try that one more time.
And so first we're going to load through the contents and returning back the question with this as the
ID.
So just make sure it is the right question ID.
So we've got all of that information there being loaded so we can load this.
And then after that we can load all of the answers.
So in this case we see that it's got three answers and then we can make a second request to the answers.
So we're going to test the first set of data and added into the second set of data.
So creating a variable that can hold the first set of data.
So this is going to be the main item info and we're just going to set up a blank object for that.
And then we're going to populate that content as data and set the contents of info to there.
And we're going to then test a second Thach request.
So once we make the initial Futch requests, we're turning back the JSON content as data.
And the next item, we're going to then return back and do a second fetch.
And this is going to be making a request to the URL, too.
And once that promise completes.
This is also going to have a response object so we can pull back that response data and return the response
data as Jason
and then output that new data object.
So we can also call it data as well, or we could call it give it another variable name.
And then here we're going to output the contents of Infl item info as well as the answers array or the
answers object.
And that's going to be contained within data.
So now we've nested the object information and I'm going to remove out some of the console content because
we've got quite a bit of stuff logging into the console.
So let's do a replace on the code and look for console log and with the console, like we just add in
the box in front of all the instances of it and do a replace on all instances of it.
And then where we want to output it, we just want to output it within this part here.
So now when we click one of the items that has multiple answers, the second array that we have here,
the second object that we have with the items is all of the answers.
And we've got the first one here is what's being returned back for questions resulting in from what
we've got within the question by the ID of the question.
So we're ready to output the content onto a page so it could another function, build page data and
we can pass through from the first item info.
So this is going to be just whatever the question data is and select from the items array.
So item info and take items.
And we're just going to return back the first result from the items and right now within the build data
function.
So create the function, build page data.
Is this going to get the main question?
And right now we'll just output the question object.
So we click it and let's clear it.
And here we see that we're listing out the main question data under Q we also want to pass over the
array of items.
So this is going to be the answers and get the answer items and then pass those in.
And this is going to be an array.
So a pluralize thought.
And first, we're going to output the question contents and then we'll output the contents of the result.
The answers are so a reload.
So this one's good.
It's got three answers.
So click that.
And instead of outputting everything, we're going to log out that information so it's a little bit
easier to troubleshoot as we're passing in the two objects.
And this actually should be data items.
So let's try that one more time.
Find one that has some answers.
And so this is returning back the question information and then also the answers that are associated
with the question, so ready to output them on the page and build the page content.
So clearing out would output in our HTML and then we're also going to be looping through each one of
the items there.
So each one of the answers and right now we're just going to do a console log of each one of the answer
items.
And this actually should be answers that were looping through and we can also refer to it as item or
actually let's just refer to it as answer and then I'll put the answer into the console.
So there's each one of the answers being put into the console and then we can deconstruct this object
information to extract the data that we want.
The property values that we want.
And for the object itself.
Let's pull out some information and add it, such as the title, the question ID, we can also include
the link.
And the answer counts, so we're going to add those four properties onto the page.
And we're just adding it to the main output area.
So let's use the element crater that we have the note, make note.
And do the make note function and return back the content that we need, so that's coming into the question
title.
And this is going to be referencing the main title so you can set that as an to as we're outputting
the HTML.
So this is going to be just going right to output.
And we can set this up as the title.
Next, we want to output's the question ID as well.
I.D., so let's return back the question ID value from the property names.
I would put that and this can just be done within a div, so separated out as a div and it's making
just another div node.
And then the other properties that we want to output, so maybe we want to do a link.
So this could just be the link.
And, well, output, so this is going into a hyperlink, so the contents of this are going to be from
the question link and that's what we're going to output there.
And for the link, we can set the
attribute.
Of HSF, and that will can equal whatever the question Lync value is.
And also for the link set attribute and also the attribute of target to be equal to blank, so it's
going to open up on a new page.
So let's see what we have so far.
So I click it.
We've got the links there, so these are active hyperlinks and loads to the question.
We've got the Idy value, so it's the title, we've got the question idy and let's add that into so
we know what that's referring to.
So the question ID, we've got the hyperlink.
And what other information that we want to load click at?
And we also want to load the number of answers that there are so accretes one more.
Total and
answers, and we're just going to reference the number of answers.
And that's contained under the answer count.
So we've got three answers question and then the link, the hyperlink, so we want to loop through and
output the answers on the page as well, and we're just going to hand those to the output or we can
create another element, another div.
And this can just serve as our main container for the answers in case we don't apply some styling to
it.
So making a note and the content of this one is just going to be blank.
And as we loop through, these are the contents that we have for the answers, so we've got an ID value
for the answer.
And let's use the same function to make the note, and this time we're tending it to the answer diff
and this could be a diff and let's create some contents for HTML.
This is what we're going to contain into the element.
And then this will just be whatever we're building as the HTML content.
So here we can add in the answer ID.
And whatever other values that we want to add, so answer and answer ID.
And let's just do a line break.
So for each one of these.
And we could also then afterwards query to get the answer information, but right now we're just get
the owner contents.
So under the owner display name.
So that's going to be contained within the answer, and that's under the owner object, and then that's
the display name that we have for the owner.
So let's see what we have so far.
Well, we clicked to load the answers.
And as we loop through, let's get an index value for the answers.
So that way
and adding an answer no, so this will be whatever the index says, plus one and do another line, break
their.
And then, of course, until rule, so let's load one that has multiple answers.
This one has two answers.
So we click it, we get answer, one answer to.
And maybe we'll do the horizontal rule above.
So three answers, one, two and three, and then these are the results, and of course, you can select
more information from the owner if you want.
Good idea, and I despise despites, their display name also accept rate as well, so it's maybe another
number that you want to add and so we'll just bracket that under answer owner and the accept rate.
So at the dollar sign in the curly brackets to add that value and.
And let's try that one more time.
So let's do a reading and then reading if it's undefined.
So it's going to be under this variable, so if the reading is if this is equal to.
Or we can just set it as that or it's just going to be blank.
And then add that value in as reading, so that way, hopefully we don't have the undefined anymore
and it just adds in the if there's no value associated with it.
So we're ready to apply some styling and we actually have to add the clicker that to the entire object
as we've only got the click of Enten on the title.
And let's add the click event to the main object.
So that way we can click any part of the main object and let's
refresh.
And that's working a little bit better.
So if we're getting undefined here for the question ID, then we should add the option to click at.
Or if we do click it and if the ID is undefined, so we do the get by ID.
So do a quick check to see if.
Well, it exists
then we do all this stuff otherwise.
We're just going to write that there's been an error, that it's not we're not able to click it and
we'll just put that in the console.
So some of them don't have an ID and those ones aren't clickable.
Let's apply some styling to the content
and do an inspect on this.
So for the main elements.
And we'll just give it a class of Infl.
And let's settle with two 80 percent border.
And let's sort the font size.
And then apply the class of info.
To the main element as we're getting it by ID and then we're building the page data.
And taking the answer, Divx and Closs list, let's add the class of info.
So need to find out some answers.
And that one doesn't have an ID, so it's not clickable.
They're actually the ones that don't have I.D., let's carry those out, so as we're showing them so
we can also just not have an event listed on them either.
So if question ID, then we add the event listener.
Otherwise, we're going to create the element, so to take me style and a lot of background.
And ATAC background color.
I just moved that in and then also let's output to the content so we'll add some more content to the
node and this is just going to indicate whatever the ID is.
So selling it to the machine.
And this is going to be the key ID that we have.
And that's going to just be referencing the question ID and we've got to give it a new different name.
And question it, so will I put that to the page as well?
So it looks like some of them aren't passing the question ID properly.
And they all do appear to have a question, Heidi.
So we need to do some troubleshooting to check to see why this ID is not passing within the element
QAD.
Maybe we can output it this way just to double check and see if it's outputting so it is being registered
within the object.
And maybe to be sure, we'll just update the get by it
and we'll call the function manually, get by ID and then we'll pass in the ID of the element.
And this is just going to take the value of the question, Heidi.
And the only value that we need here is the question ID.
So this is going to be taking the QAD, we don't need the target anymore.
And let's update these values here.
And save it, so now whenever we click it, they should all be working.
And let's double check the element and see if we're applying the styling so it doesn't look like we're
applying the styling, we are applying the styling of Infl to that element itself.
So let's a margin of auto and you can apply styling as needed to the element content.
So all the answers are also going to use some Google fonts.
And add in the Google font into the styling of the page and add that just into the body of the page.
So first we import the style and then to the body, the Ford family, we can add this as the font family.
So to it that looks like change the way the application looks.
And we also might want to apply some styling there within this main container, within the output container.
So just kind of separating out it to output as well.
So now we're loading the question content dynamically, depending on what the question is, and let's
do one more quick look and see what we've got for the API so we can as well do a search within the API.
And this is going to be the.
Search, so we're going to add in still a quick option to do a search within the input and be able to
click and update and output the content of the search.
So that's coming up in part three.
The challenges for this lesson and the tasks for this lesson are to make multiple Thach requests to
that end point and return back data.
So investing in a request with another request.
So we're getting the question information as well as the answers content and then building out the content
dynamically according to what the JSON data returns.
And then also depending on what the user selection is, outputting some page content.