1
00:00:00,550 --> 00:00:05,980
There's one more event that I wanted to add in before we proceed, and that's going to be listening

2
00:00:05,980 --> 00:00:13,300
under the document object, listening for we're adding another event listener and this event is going

3
00:00:13,300 --> 00:00:17,470
to be called dorm content loaded.

4
00:00:18,100 --> 00:00:24,500
And this gets invoked whenever all of the content gets loaded from the page.

5
00:00:24,850 --> 00:00:31,000
Now, typically, because we've got our JavaScript below our HTML, everything should be fine.

6
00:00:31,180 --> 00:00:38,890
But we want to be just extra sure that we do have all of our HTML elements loaded before we proceed

7
00:00:38,890 --> 00:00:40,830
with loading the game.

8
00:00:40,840 --> 00:00:45,650
And we also this is the ideal spot as well in order to load our content.

9
00:00:46,030 --> 00:00:54,480
So setting up a function and this is that get data function and for now will output.

10
00:00:55,180 --> 00:00:58,030
So let's refresh and we see andam loaded.

11
00:00:58,180 --> 00:01:02,510
So that means that basically we got all of the information and we're ready to go.

12
00:01:02,980 --> 00:01:05,460
So we also want we've got a few options.

13
00:01:05,470 --> 00:01:12,070
We've got all of our game data available within this JSON file so we can use fetch in order to retrieve

14
00:01:12,070 --> 00:01:21,280
that data or if you want an easier way, is to copy and paste it in and use it within our values here

15
00:01:21,280 --> 00:01:29,650
so we can set up another const, we can call it data, and then within here we can post all of that

16
00:01:29,650 --> 00:01:31,020
data information.

17
00:01:31,630 --> 00:01:36,580
So notice as well that this is within a format, JSON format.

18
00:01:36,580 --> 00:01:44,320
So this will work, but we're just going to double check and we'll consider log out whatever the contents

19
00:01:44,320 --> 00:01:47,290
of data is as we refresh the page.

20
00:01:47,680 --> 00:01:52,610
And we can see that we've got our array and we've got all of our values are in there.

21
00:01:52,900 --> 00:01:59,410
Now, there is a way to get this information into our project as well from the my JSON bin.

22
00:01:59,650 --> 00:02:03,010
And I'll show you how to do that as well so you can use either one.

23
00:02:03,310 --> 00:02:09,670
And of course, if you are using the my JSON data, then you're not going to be able to update it.

24
00:02:09,880 --> 00:02:13,980
If you use the data within this type of format, you will be able to update it.

25
00:02:14,230 --> 00:02:15,490
So that's the big difference here.

26
00:02:16,300 --> 00:02:23,740
So let's go ahead and we're going to set up and get that data, loading it into the game object.

27
00:02:25,040 --> 00:02:33,740
So for now, I'll just comment this one out and I need to also get rid of this console message and will

28
00:02:33,750 --> 00:02:40,810
set up a variable that we can use in order to retrieve back that game object data.

29
00:02:41,060 --> 00:02:43,850
So we're using one called game object.

30
00:02:44,730 --> 00:02:50,370
And then over here, when we're getting the data, we're going to use JavaScript fetch.

31
00:02:50,550 --> 00:02:52,770
So this is new with S6.

32
00:02:53,970 --> 00:02:56,660
You can also use the zaatar request.

33
00:02:57,030 --> 00:02:58,740
So that was the previous way to do that.

34
00:02:59,250 --> 00:03:01,380
So you need to specify a URL.

35
00:03:01,590 --> 00:03:03,680
And this is this one is promise based.

36
00:03:03,960 --> 00:03:11,070
So what happens is that it Waitstill the content is loaded and once it's retrieved information, then

37
00:03:11,070 --> 00:03:12,660
it moves on to the next step.

38
00:03:12,930 --> 00:03:18,060
And we indicate that using then and we can have another function over here.

39
00:03:18,210 --> 00:03:22,160
And this is going to be the response from that request.

40
00:03:22,470 --> 00:03:25,810
I'll make this a little bit bigger so it's a little bit easier to read.

41
00:03:26,610 --> 00:03:35,280
So this is our next step in the process of fetching, and this is where we can return that response

42
00:03:35,640 --> 00:03:39,980
and we're going to return it within adjacent format because we're getting it within adjacent format.

43
00:03:40,230 --> 00:03:43,640
So I'll add that in and then we're going to add in one more promise.

44
00:03:43,860 --> 00:03:45,870
And again, this is just another step.

45
00:03:45,900 --> 00:03:48,820
So once that promise above loads.

46
00:03:48,840 --> 00:03:55,710
So first, once this you are loads, then we get the data and we get it within a JSON format and then

47
00:03:55,710 --> 00:03:57,990
we send it forward into the next part.

48
00:03:58,080 --> 00:04:03,290
And that's going to be where we retrieve it back in a variable called data.

49
00:04:03,570 --> 00:04:05,280
And then this is where we can make use of it.

50
00:04:05,310 --> 00:04:06,030
So we just can't.

51
00:04:06,030 --> 00:04:14,580
So log out the value of data and just to make sure that everything is working will refresh or will refresh

52
00:04:14,580 --> 00:04:15,090
our page.

53
00:04:15,480 --> 00:04:21,410
And we see that we've loaded all of that object information into here as our data array.

54
00:04:21,630 --> 00:04:26,350
Same thing, except we are getting it from our life JSON file.

55
00:04:26,580 --> 00:04:30,320
We're no longer using that game object data in there.

56
00:04:30,690 --> 00:04:32,580
So that's two different ways to do that.

57
00:04:32,740 --> 00:04:38,340
And then if you want it to inserted into the usable format, you can use game object.

58
00:04:38,340 --> 00:04:44,670
And we've got our data and we've got to use data twice because our object is called data.

59
00:04:44,680 --> 00:04:52,170
So we've got our main object that we're turning back is this data and then we need to go one level in

60
00:04:52,410 --> 00:04:55,200
within that object and retrieve back data.

61
00:04:55,890 --> 00:05:04,410
So now if I console log out whatever's contained within game object, I should see all of that data

62
00:05:04,500 --> 00:05:05,370
from that file.

63
00:05:05,380 --> 00:05:08,780
So you see that it's all sitting in there and it's all ready to go.

64
00:05:08,970 --> 00:05:10,800
So it's within an array format.

65
00:05:11,010 --> 00:05:12,660
So we've got a length of thirteen.

66
00:05:12,780 --> 00:05:16,680
And that's perfect because we are going to be making use of that in the upcoming lessons.

67
00:05:16,980 --> 00:05:19,200
So you can load that in either way.

68
00:05:19,230 --> 00:05:26,070
You could load it in simply by copying and pasting that object information from this file path.

69
00:05:26,340 --> 00:05:28,320
Or you could use fetch.

70
00:05:28,770 --> 00:05:33,180
So go ahead and load the game data and you could be ready to move on to the next step.

71
00:05:33,200 --> 00:05:37,710
We're going to be able to start playing the game and have something happen within our page.

72
00:05:37,830 --> 00:05:38,990
More than just this.

73
00:05:39,000 --> 00:05:39,450
True.

74
00:05:39,480 --> 00:05:40,460
Yes, start.

75
00:05:40,740 --> 00:05:42,750
So all of that is still yet to come.