There's one more event that I wanted to add in before we proceed, and that's going to be listening
under the document object, listening for we're adding another event listener and this event is going
to be called dorm content loaded.
And this gets invoked whenever all of the content gets loaded from the page.
Now, typically, because we've got our JavaScript below our HTML, everything should be fine.
But we want to be just extra sure that we do have all of our HTML elements loaded before we proceed
with loading the game.
And we also this is the ideal spot as well in order to load our content.
So setting up a function and this is that get data function and for now will output.
So let's refresh and we see andam loaded.
So that means that basically we got all of the information and we're ready to go.
So we also want we've got a few options.
We've got all of our game data available within this JSON file so we can use fetch in order to retrieve
that data or if you want an easier way, is to copy and paste it in and use it within our values here
so we can set up another const, we can call it data, and then within here we can post all of that
data information.
So notice as well that this is within a format, JSON format.
So this will work, but we're just going to double check and we'll consider log out whatever the contents
of data is as we refresh the page.
And we can see that we've got our array and we've got all of our values are in there.
Now, there is a way to get this information into our project as well from the my JSON bin.
And I'll show you how to do that as well so you can use either one.
And of course, if you are using the my JSON data, then you're not going to be able to update it.
If you use the data within this type of format, you will be able to update it.
So that's the big difference here.
So let's go ahead and we're going to set up and get that data, loading it into the game object.
So for now, I'll just comment this one out and I need to also get rid of this console message and will
set up a variable that we can use in order to retrieve back that game object data.
So we're using one called game object.
And then over here, when we're getting the data, we're going to use JavaScript fetch.
So this is new with S6.
You can also use the zaatar request.
So that was the previous way to do that.
So you need to specify a URL.
And this is this one is promise based.
So what happens is that it Waitstill the content is loaded and once it's retrieved information, then
it moves on to the next step.
And we indicate that using then and we can have another function over here.
And this is going to be the response from that request.
I'll make this a little bit bigger so it's a little bit easier to read.
So this is our next step in the process of fetching, and this is where we can return that response
and we're going to return it within adjacent format because we're getting it within adjacent format.
So I'll add that in and then we're going to add in one more promise.
And again, this is just another step.
So once that promise above loads.
So first, once this you are loads, then we get the data and we get it within a JSON format and then
we send it forward into the next part.
And that's going to be where we retrieve it back in a variable called data.
And then this is where we can make use of it.
So we just can't.
So log out the value of data and just to make sure that everything is working will refresh or will refresh
our page.
And we see that we've loaded all of that object information into here as our data array.
Same thing, except we are getting it from our life JSON file.
We're no longer using that game object data in there.
So that's two different ways to do that.
And then if you want it to inserted into the usable format, you can use game object.
And we've got our data and we've got to use data twice because our object is called data.
So we've got our main object that we're turning back is this data and then we need to go one level in
within that object and retrieve back data.
So now if I console log out whatever's contained within game object, I should see all of that data
from that file.
So you see that it's all sitting in there and it's all ready to go.
So it's within an array format.
So we've got a length of thirteen.
And that's perfect because we are going to be making use of that in the upcoming lessons.
So you can load that in either way.
You could load it in simply by copying and pasting that object information from this file path.
Or you could use fetch.
So go ahead and load the game data and you could be ready to move on to the next step.
We're going to be able to start playing the game and have something happen within our page.
More than just this.
True.
Yes, start.
So all of that is still yet to come.