In this lesson, we're going to make our request to the end data from the sheet and as you can see,
there's a lot of data here and we need to pass through it in order to reconstruct in only pick out the
information that we need.
So, again, quite a bit of values there.
And all of the sheet data is there.
We just need to be able to select it properly.
So we're going to navigate through the content that JSON object and reconstruct the JavaScript object.
So we'll create a function and the function is going to be the same as what we did in the earlier lessons
within the other application where we're making our request over.
So that was just a fetch request that was loading the data.
And instead of loading the questions, now we've got our Yooralla is going to be different.
So let's add in a function that's going to load the questions and it's going to connect to the JSON
object and then output JSON object.
And for all of the rest of this stuff here, we can clear that out.
And as we're going to be constructing this separately and the only other one that we do need to have
is the questions object so that we can populate the questions properly as we load through the data.
So let's make sure that we can connect to the feed and open it up within the console.
And you can also output it onto the page as string of content if you want.
And that will just output the content as stratified content.
So that gives us our massive JavaScript object and as well, if you want to use the lint.
So that the data is more readable, you can also check to do the valid JSON and this actually makes
it a lot more readable that we can see the content.
We've got the author information there.
We've got the feed.
So within the feed, this is where all of our object information is that we need to access and within
the entries.
We've got a listing of all of the items there, so all of the rows, so entry is an array, so let's
try to select that and then within the entry array.
This is where the content is that we want to access.
So first thing that we want to do is start breaking apart this JSON content and getting to what exactly
we want to access.
So having all of that information, let's go ahead and select from the feed.
So the feed is the first object that we want to select.
And a lot of times it's good to just kind of go property value by property value.
So that way now we've got the feed and we've got entry, so entry is the one that we're after because
this is going to be the data for each one of the rows.
And as you can see, if I update the number of rows, I get updated entries that correspond to the rules.
So I've got nine entries there, nine rows within the data, and it by default will take the first row.
As the object property name, so that's why it's good when you are creating your sheet that you use
the first row as the object name and you can see that as well, that the object names are at the top
and it starts the first item is going to be.
The first entry there.
And it's just returning back the values so got question option, it's using this giant dollar sign and
then whatever the header is of that particular column.
So I just remove out the excess rose.
And let's go back and we'll load the data.
So we need to loop through the entry so till we get to the actual array, so you should you want to
see something like this where you've got an array of the object information.
And at this point, this is where you can actually iterate through the contents and you can loop through
each one of those.
So let's do that as well.
We don't need to output it anymore to the page so you can take the data feed and entry.
And then using a for each loop, just as we did before, we can loop through each one of the elements
that are within the feed and I'll just rename that to Al.
So that gives us each one of them separated.
And now we want to loop through all of these objects and we only want to pick up the ones that have
the prefix of Jesus X dollar sign with whatever the header is.
So the rest of the stuff we don't need.
And the other option is to take the content dollar sign T and use the JSON pass to pass this back into
an object format.
So let's select that first and we'll do a content and that outputs the content, so we want to return
back the dollar sign T.
And now we've just got all of the content being logged in.
Now one of the problems here is that this content, although it's comma, separated, we're not able
to parse it as a JavaScript object.
So it is rather difficult.
We'd have to restructure it if we were to take this into a LENTE program and add in these options and
get rid of some of them so we don't have as many.
We would have to wrap it with an array and then it still wouldn't be valid as each one of these would
need to be an object and they'd have to be, comma, separated.
We also need to have the quotes around them.
So it does take quite a bit of formatting to to get the proper structure for each one of these items.
So there is an option to either to go through and create the proper structure.
So that way you're got valid JSON or we could look to some of the other data that we're collecting there
and we can just loop through each one of these as these are already objects.
So depending on which way you want to go, we can get the key value and check to see if the first part
of the string is going to be X dollar sign.
And if it is, then we know that we've got a valid column of data.
So let's do that instead where as we loop through them.
Will also loop through and get the key.
In the elements.
And will console lock out all of the key values, so that gives us all of the keys for the data.
And now we just need to focus on the ones that have the sex.
And it again, it is using the header that it's selecting those values.
So let's check to see if the key and using JavaScript string method, check the substring starting at
zero to index value of three is equal to gay sex.
And if it is, then that's the key that we're going to output into the console.
So let's do that.
So now we should only list out the ones that have the sex value and elsewhere looping through.
Let's create our holding array so that we can reconstruct the JavaScript object from the JSON data.
So we do have the key.
And in order to get the value, we can get the value by using the key so we can do it this way.
And that gives us the value of the item within the object.
And if we only want to just get the string value, we need to separate it out as the object.
So returning back the dollar sign T.
So do the dollar sign T, and now that returns back all of the values from the columns so we can use
that and populate it into the Holder array and we want to construct the questions data the same way
that we did with the initial one where we've got all of the incorrect ones.
And so we're adding those into an array and then also updating it.
So let's copy this and we want to push it into the questions.
So I've got to just copy so we can mimic the same structure and ultimately push it into questions,
so now that we've got all of the options and we've got the question as well first as well as options
and information, so we can also check whatever the value is of the key as well.
So let's do a console log and log out the key and we can use that to check what the value is going to
be.
So if we're looking for one, that is the question.
So the first one where we're looking for.
Good question.
We can do a condition and then that way we can populate the question into an object and as well we can
get the correct answer, which is going to be the first one under the object.
Correct.
And then blue is all of the options.
We're just going to loop through any ones that have options and have values, and then they're going
to go into the additional options that we have and they're all going to be false, whereas the first
one is going to be true.
So I know this one is fairly complex and it does take a little bit of time to get used to being able
to pass out the data from such a complex JSON object that we also want to get the header.
So do that and we'll create the header from the key value.
So the header is going to just slice.
We only need to do that when we're selected the right value.
And so let's set this as header and taking the key and using slice and the starting position of slice
is going to be with the index value of four.
So let's see what we've got now for headers.
So that stripped out the just to the object name.
So we've got the question and we've got the correct and all of the options.
So now we can begin to construct the same format as we have here or we've got the main temp and then
pushing it into questions.
So that's going to be our main template and then we'll push that into the questions, so this is all
going to be done within that condition, whatever the sex is proper, then we can use the mean content
and the correct question.
So we'll select that mean template and keep it outside.
And then let's update the question.
So if the header is equal to question, then we know that this is going to be the main question.
So we'll take the main object and add to question and equal whatever the value is that's contained in
here and also for the correct answer.
So if the header is correct, then let's set the value as whatever the correct value is.
And then the last one is that we just need to load all of the options.
So we're pushing that content.
The main content in and these are just console messages.
And also, let's break apart the value so that we can just reference the value here and this is the
value from the key, so it looks a lot simpler and cleaner within the code.
And then as we build this before we conclude this lesson, let's console logout questions.
So it looks like something went wrong there, that we ended up with too many questions and again, we
only want to append it and add it if we've populated content.
So let's refresh it.
And it still looks like we're still getting some blank values.
And those are the blank values are for the options array.
So if it's not within correct and if it's not within question, then we want to skip through as we're
looping through each one of the items, each one of the keys.
So let's update these to be else, if and if it's not a question, if it's not correct, then what we're
going to do is we're going to add this value into the options.
And I'll move the main item back outside, so as we're iterating through, we can update that main content
there.
So if it's not the correct if it's not a question and if the value is going to be options.
That we're going to add to the holder array.
The object structure, and this is one of the options.
So if the value length is greater than zero,
then we're going to add that item into the array, the holder array.
And let's just create a temporary object and then this is the one that we're going to push into the
arena.
So within the temporary object, so we have an array for options.
So it's the same where we've got the response and we've got whether it's correct or not.
And we can actually get rid of the Holder object altogether.
And we're not going to be using that.
We're just going to push it into the options.
So whatever the value of Tempus and then within temp, we've got the object information of the response,
which is going to be the value and whether it's correct or not.
So they're all going to be false for the options.
And the only correct one is going to be this value.
So if it is correct, so we need to add that in and set that to be true.
And let's move the main temp outside of the loop.
We're constructing all of the options and also move the push of mean temp outside as well.
So that returns back the structured array where we've got the correct is blue and all of the options.
So we've got the correct answer.
We've got the question within the structure and as well, we've got the green value, all of the options.
And this, again, is coming from our sheet.
And then the last question and the response options for the question.
So now if we dynamically update the content that we have within the spreadsheet, it should also update
what we have for our quiz.
So if we were to add a bunch more items and just do a quick refresh.
So now we've got 15 questions.
We've got the options array, the questions and the correct answer.
So I know this one has been fairly difficult and you will encounter fairly complex JSON objects.
So looping through and getting to the object data.
So get into the array part of it that you can iterate through, use the different for loops.
And also if you want to get the object keys you can use for where you checking to get the key within
the element value.
And that way you can pass through a lot of the data and extract out exactly what you need.
And you can construct your own JavaScript object that you need for your application within the structure
that you need it for to work.
So I know this has been a fairly complex lesson and it is important to learn how to extract JSON data
and sometimes they are complex with a lot of objects and arrays within them.
So load JSON from the sheet, extract the values that you need from the sheet data and get the rows
and columns of data out.
And a number of ways that we've shown within this lesson how you can pull that and get that data out,
check the object, key values using loops.
So either the for loop to get the key values and return back the property values.
If it is one of the properties that you want to pick up, also iterate through the array of entries
and then rebuild your JavaScript object as needed for your application.
And we saw earlier that when we're using a more simple JSON format, we constructed a JavaScript object
from the JSON file.
So we've done the same thing here where we've got just a more complex JSON object and we've reconstructed
the JavaScript object that our application needs to work with.
So you need to do all of this before you can move on to the next lesson.
We're going to finalize the application, creating a quiz running from data that's sitting within a
spreadsheet.