In the last lesson, we created the JSON file we're looping through, we're getting the JSON data in
this lesson, we want to loop through the data that gets returned and restructure it into the questions
object so that we have a clear question and then we've got a bunch of answers.
And then these can be set as objects that we can randomize the order of the array so that they're all
listed within that same array.
And then we can randomize where they're going to show up on the screen because we don't want the correct
answer, always showing up in the same spot and we want it to be mixed in with the incorrect answers.
So let's take the data content and using for each.
We're going to loop through each one of the items within data and that will return back an element object.
And with those elements, we're going to be pushing those into the questions.
So let's first structure the content accordingly and we'll output the content into the console of the
element.
So that's going to be just each one of the objects.
So we've got the question object.
And then for each one of the items in the array, we've got a bunch of items as well.
So we're going to add all of those into the array.
So we want to construct temporary array that and this is going to be the holder of the object information
for the correct and the incorrect answers.
We want to loop through the incorrect answer arrays.
So using data and in.
Correct.
Let's do a for each loop.
And these are all the different answers that we have and will add the answers into the temp object.
So first, let's also create a temporary object to hold that information and set it up as an object
so this can be whatever the responses, and this is going to be the content that's contained within
that answer.
And these are all the incorrect ones.
And for the incorrect ones, they're all going to be having a boolean value of false.
And within the temp object, let's push the temp object into the temporary.
So that will set up and structure our array.
And actually this should be element as we're looping through each one of the elements.
Incorrect.
So that creates and updates the temporary array so you can log it out into the console just to check
to see the content that you currently have available there.
So does it twice.
It creates two of these arrays and the arrays have the response and a boolean value for a corrected
incorrect.
Also, let's create another one.
And actually the order doesn't matter.
We're just creating another temporary object.
And this one is going to be whatever we're getting originally for the correct answer.
So from that element.
Correct.
And this value is going to be true.
So that gives us an array that we can randomize that has all of the correct answers and the incorrect
answers, all in one array.
With Boolean values checking and being able to detect if the answer is correct or incorrect, so as
we loop through, we've got the main questions array that we can add the content into.
So as we're looping through each one of those, we can construct our object that we're going to eventually
put into questions.
And this can be another object that we're going to be creating.
And for this one, we can start out with a value for question.
And set that to be whatever the L question is, and we can also put this at the bottom because we're
not concatenating to the temp.
So the temp is just a placeholder.
So let's actually put it at the bottom and then so that we don't have to add it into the object.
And this will just list out all of the options using the temporary array.
So at the end of all of this, within the questions.
So let's take questions and we'll push the main temporary object into the questions.
And so after we complete the loop through and iterating through the content, let's log out what we've
got for questions.
And that actually needs to be within this request.
So we're going to log out what we've got for questions.
And now we should have better structured questions and a comment about the other console messages so
that we only just have the one main console content, which is going to be the newly constructed question.
So we've got a question and we've got a bunch of options.
The options are boolean values.
So there's cracked and I whether it's correct, it's got a boolean value and then the response for the
option for the user to select.
So this was just a restructuring that it's going to be easier to loop through an output, this kind
of content onto the page.
And then once we've constructed the questions, we're ready to start and initiate the quiz for the user.
So that's coming up in the next lesson.
And also, if you ever want to see the output, you can always do a document.
So doing document, right.
And then JSON string of fi, the contents of questions.
So this will provide you JSON object check within a validator and this would come out as valid JSON
and of course, when you do put it into the validator, it's it's a lot easier to read.
And this way we can see how the new construction is that we've got a bunch of options, whatever the
correct answer is true.
So we want to randomize the options array before we present it to the user.
And then we've also got the question information here within the format of the new questions object
that we just created.
So before you move on to the next lesson, loop through the JSON data and get the object details and
then rebuild it into a new object with Boolean values for the correct options.
So either incorrect or correct aren't options and then just whatever the option value is and then check
for the new object, make sure that the structure makes sense within the console.
Also, you can try that within JSON lint or JSON validator and you could be ready to move on to the
next list.
So we're going to start creating the interaction and output on the page for the user.