1
00:00:00,240 --> 00:00:05,250
Welcome back in this lesson, we're going to do a quick code review, as well as some tweaks to our

2
00:00:05,250 --> 00:00:05,550
code.

3
00:00:05,550 --> 00:00:11,130
And I know the last lesson was fairly long, but we did have to structure all of this data, this JSON

4
00:00:11,190 --> 00:00:13,560
data, in a more usable format.

5
00:00:13,680 --> 00:00:18,670
And that format was already dictated to us in the beginning when we structured our data.

6
00:00:18,900 --> 00:00:23,580
So there's a number of different ways that we could handle this and going through this and iterating

7
00:00:23,580 --> 00:00:26,690
through all the different values, that's one of the best ways to do it.

8
00:00:26,850 --> 00:00:32,430
And usually the way that I work with it is I will use something like JSON lint so I can see the content

9
00:00:32,550 --> 00:00:37,980
and returning back each one of those items, especially within these arrays, and then returning back

10
00:00:37,980 --> 00:00:43,740
and getting that content that I want to make use of so we can remove all of the console messages coming

11
00:00:43,740 --> 00:00:44,970
into our project.

12
00:00:45,210 --> 00:00:47,270
We need a way to load data.

13
00:00:47,430 --> 00:00:51,510
So we've got some default data that's sitting there within the MIT data object.

14
00:00:51,750 --> 00:00:57,390
And I'm going to move some of the stuff up to the top as this is where we're setting and initiating

15
00:00:57,390 --> 00:01:02,390
all of our initial variables as well as our adding in the events.

16
00:01:02,700 --> 00:01:06,060
So make this bigger so we can take a closer look at the content.

17
00:01:06,240 --> 00:01:07,860
So we didn't have any styling.

18
00:01:07,860 --> 00:01:11,580
We did this all with JavaScript, so we didn't have any styling at all.

19
00:01:11,820 --> 00:01:13,920
And this was all done via JavaScript.

20
00:01:14,040 --> 00:01:16,950
So I had a little bit of styling that we were applying to the elements.

21
00:01:17,250 --> 00:01:23,100
And before what we did is we set up a couple elements to create some interaction for the user.

22
00:01:23,100 --> 00:01:27,900
So a button and an output area, we didn't really utilize the output area a whole lot.

23
00:01:28,080 --> 00:01:33,270
We could also put in some messaging and additional content in there as needed.

24
00:01:33,810 --> 00:01:37,620
So we came in first and we set a global variable of Eurail.

25
00:01:37,800 --> 00:01:42,300
And this is because we're going to be constructing a neutral using JavaScript.

26
00:01:42,300 --> 00:01:48,000
And this also gave us the option to check if that you URL exists and clear that out and I'll show you

27
00:01:48,000 --> 00:01:50,360
that function afterwards as well.

28
00:01:50,380 --> 00:01:54,090
The one that we were using was that create object you URL.

29
00:01:54,090 --> 00:01:57,420
And then over here we needed to revoke the object you URL.

30
00:01:57,540 --> 00:02:02,980
Otherwise we can't click and download it over and over again because as it's going to be sitting and

31
00:02:03,000 --> 00:02:04,700
it create some memory leak issues.

32
00:02:05,070 --> 00:02:08,010
So that's always a good way to do that, that keep this globally.

33
00:02:08,460 --> 00:02:14,100
Next, we had a few variables that we needed to set up and one of the variables is the feed ID.

34
00:02:14,370 --> 00:02:19,080
So this also makes it easy if you have different spreadsheets, that you can have different feed IDs

35
00:02:19,080 --> 00:02:27,120
and updated and that can update the feed you URL that you use and give you options to get multiple spreadsheets,

36
00:02:27,360 --> 00:02:31,590
all you have to do is go over to the Google spreadsheet, make sure that it's shared and then using

37
00:02:31,590 --> 00:02:37,710
the object ID of the Google spreadsheet, you use that as the feed ID and then the rest of the URL is

38
00:02:37,950 --> 00:02:38,490
the same.

39
00:02:38,700 --> 00:02:43,230
So whether you're using your project or my project, all of these URLs are going to be the same.

40
00:02:43,230 --> 00:02:45,330
The only thing that ever differs is the speed.

41
00:02:45,870 --> 00:02:47,490
So that's the most important one.

42
00:02:47,700 --> 00:02:51,000
We needed a way to trigger the loading of the content.

43
00:02:51,210 --> 00:02:57,680
So we made sure that our dorm has loaded and that was the ideal spot to load the JSON data.

44
00:02:57,870 --> 00:02:59,160
We've got some default.

45
00:02:59,160 --> 00:03:06,180
My data that we were using originally and this can also stay into the project in case for whatever reason

46
00:03:06,180 --> 00:03:11,040
you have some problems loading the data or the data is taking a long time to load this way.

47
00:03:11,040 --> 00:03:12,930
The user is actually going to get something.

48
00:03:13,530 --> 00:03:16,970
So you could use Gleave this into your project or you could remove it out.

49
00:03:17,190 --> 00:03:24,020
And this also serves as a way to structure the content that we need within our CSV file.

50
00:03:24,480 --> 00:03:27,680
So it's also a good indicator of how to structure the content.

51
00:03:27,930 --> 00:03:34,140
Next, we select the elements from the page and created them as objects in our JavaScript and for the

52
00:03:34,140 --> 00:03:37,710
button one, we added some styling and then added an event listener.

53
00:03:37,830 --> 00:03:43,680
And whenever that gets clicked, then what we're doing is we're sending the my data to create the CSV

54
00:03:43,680 --> 00:03:44,170
function.

55
00:03:44,640 --> 00:03:46,560
This was the load Jason function.

56
00:03:46,560 --> 00:03:52,710
This is the one that we did in the last lesson and it was fairly complex and mainly because of our JSON

57
00:03:52,710 --> 00:03:55,740
feed was so complex that we had to.

58
00:03:56,340 --> 00:04:03,570
So we did the fetch return back the JSON object and then returned it back as a JSON data object and

59
00:04:03,570 --> 00:04:05,940
then using a variable called data.

60
00:04:06,120 --> 00:04:07,590
That's where we had all of the data.

61
00:04:07,830 --> 00:04:12,600
And because the data, it was a huge object, it had a feed and entry.

62
00:04:12,840 --> 00:04:16,740
Entry is the one where it contained all of the rows and columns of information.

63
00:04:16,950 --> 00:04:21,840
So that's the one that we went to to use and we used for each to loop through each one of those rows.

64
00:04:22,050 --> 00:04:24,090
We set up a few different arrays.

65
00:04:24,300 --> 00:04:26,100
So one was our main arrays.

66
00:04:26,100 --> 00:04:31,020
So this is the one that we're going to use in order to build out our my data structure.

67
00:04:31,350 --> 00:04:36,930
And we also wanted one for heading, because the way that the Google sheet works is that the headings

68
00:04:36,930 --> 00:04:42,690
as their object names, it's fairly difficult to add it into an array because it will skip the first

69
00:04:42,690 --> 00:04:44,040
row and treat it as a heading.

70
00:04:44,280 --> 00:04:48,210
So we need it to have a separate array in order to add that in.

71
00:04:48,210 --> 00:04:50,040
And that's where we also did the first run.

72
00:04:50,190 --> 00:04:55,680
So we want the first time through in order to update headings so that we could add it into the main

73
00:04:55,680 --> 00:04:59,570
array as our first item within that array.

74
00:04:59,950 --> 00:05:06,520
So next we loop through, so we got a key as an items we saw with an item, we had a whole bunch of

75
00:05:06,520 --> 00:05:11,170
content that was being returned back and we want it to loop through that content.

76
00:05:11,180 --> 00:05:12,840
So it wasn't an object format.

77
00:05:13,030 --> 00:05:18,670
So we created a loop of what the object content where we were getting the object value, the paired

78
00:05:18,670 --> 00:05:22,970
values as key and returning it through item.

79
00:05:23,560 --> 00:05:31,120
Then what we were looking for is if Key had a starting value of sex and we know if it was starting value

80
00:05:31,120 --> 00:05:34,240
of sex, that was one of the values that we wanted to use.

81
00:05:34,390 --> 00:05:42,200
And the sex indicated that sex ed had a dollar sign and then it had the heading as the object key.

82
00:05:42,760 --> 00:05:46,770
So we also used that in order to get the object number.

83
00:05:46,780 --> 00:05:51,800
So we're doing item key, but we could also use the T dollar sign.

84
00:05:51,830 --> 00:05:56,510
So this is where the actual content was held and this is where we were getting the heading.

85
00:05:56,560 --> 00:06:00,390
So we're building up that first item in our array.

86
00:06:00,610 --> 00:06:02,830
So checking again to see if it's first run.

87
00:06:02,950 --> 00:06:10,200
And if it is, we're adding item as our are the heading array as our first item in the array.

88
00:06:10,210 --> 00:06:11,860
And then we weren't running it again.

89
00:06:11,870 --> 00:06:17,680
So then this was only run for the first time to get the heading information and pushing it into the

90
00:06:17,680 --> 00:06:18,330
main array.

91
00:06:18,460 --> 00:06:21,210
And then afterwards we're just pushing the holder items in.

92
00:06:21,880 --> 00:06:27,730
So going through all of that and as we iterate it through, we slowly built out main array and then

93
00:06:28,030 --> 00:06:32,280
once we've created the main array object, we assign it to my data.

94
00:06:32,410 --> 00:06:38,320
So that effectively removed this and added in the contents coming from our spreadsheet.

95
00:06:38,770 --> 00:06:43,390
We also had a function in order to create our CEV.

96
00:06:43,420 --> 00:06:48,100
So this was a CSV function so we can send any type of data in there.

97
00:06:48,280 --> 00:06:53,530
So if we had multiple spreadsheets, multiple data, we can use the same function to create the CSV.

98
00:06:54,040 --> 00:07:03,220
We needed a file in order to hold our contents as well as another variable in order to build our content.

99
00:07:03,790 --> 00:07:06,360
So we set those up as some default variables.

100
00:07:06,610 --> 00:07:12,400
We also checked to see if the URL exists and this was where we're revoking the object URL and we're

101
00:07:12,520 --> 00:07:13,570
creating that object.

102
00:07:13,570 --> 00:07:15,940
You URL, we need it to create a file name.

103
00:07:15,940 --> 00:07:18,490
So this file name can also be dynamic.

104
00:07:18,490 --> 00:07:19,780
You can change the values.

105
00:07:19,930 --> 00:07:22,750
So right now it's just always calling it test CSFI.

106
00:07:22,970 --> 00:07:24,430
You could call it something else.

107
00:07:24,670 --> 00:07:29,200
We needed also to when we create the file object, we need IT properties.

108
00:07:29,200 --> 00:07:30,310
So we needed a file name.

109
00:07:30,310 --> 00:07:31,330
We need needed properties.

110
00:07:31,540 --> 00:07:34,870
So properties, you can specify the type of file you're creating.

111
00:07:35,020 --> 00:07:39,380
We saw earlier that we can create a text file or we can take CSV file.

112
00:07:39,580 --> 00:07:45,880
So this is the format to create a CSFI file, the different types we loop through all of the contents

113
00:07:45,880 --> 00:07:46,670
of data.

114
00:07:46,870 --> 00:07:52,060
So because this was in an array format, we loop through all of them and we had to make sure that we're

115
00:07:52,060 --> 00:07:58,690
cleaning up the items that are contained within that array because we saw that if we had commas in there

116
00:07:58,840 --> 00:08:03,420
and a few other characters or line breaks, that they could potentially create issues.

117
00:08:03,610 --> 00:08:11,710
So we had to wrap around with the double quotes in order to break out and be able to utilize that those

118
00:08:12,490 --> 00:08:14,920
those characters in our string.

119
00:08:15,130 --> 00:08:21,190
So we built and we restructured the cell, always making sure that it's within a string format, of

120
00:08:21,190 --> 00:08:24,600
course, and then returning it back as a clean version.

121
00:08:25,210 --> 00:08:27,010
So just using that function to clean it.

122
00:08:27,190 --> 00:08:33,130
And as we clean those rows of contents, then the next row is just indicated with the line break.

123
00:08:33,820 --> 00:08:35,410
Next, we created the file.

124
00:08:35,590 --> 00:08:43,900
So using the new file, the object creator, we passed in our content and we also passed on a file name

125
00:08:43,900 --> 00:08:49,240
and then some properties in order to make it downloadable so the user doesn't have to click a link.

126
00:08:49,450 --> 00:08:55,480
We created a hyperlink dynamically, we attached the user, else we created you are an object.

127
00:08:55,750 --> 00:08:58,330
We set the attribute of the link as the URL.

128
00:08:58,510 --> 00:09:01,650
We set the attribute of the download as the file name.

129
00:09:01,810 --> 00:09:08,380
We made it in visibility as hidden, even though there's no content within that anchor text.

130
00:09:08,590 --> 00:09:10,540
We did make it hidden just in case.

131
00:09:11,260 --> 00:09:13,930
And so this is invisible to the user.

132
00:09:14,230 --> 00:09:15,820
We appended it to the body.

133
00:09:16,330 --> 00:09:22,210
We initiated the click of that link and then we removed it from the body.

134
00:09:22,210 --> 00:09:23,170
So we move child.

135
00:09:23,170 --> 00:09:24,730
So we still have that link object.

136
00:09:25,150 --> 00:09:32,400
And then lastly, so what that did is that created the click on the link and made it download when we

137
00:09:32,410 --> 00:09:36,600
ever we clicked that main button within our HTML.

138
00:09:37,060 --> 00:09:41,980
So it's a quick run through of the code and you're welcome to try it out for yourself.

139
00:09:42,010 --> 00:09:47,610
And I do encourage you to take the source code that has been provided and see what you can do with it.

140
00:09:47,620 --> 00:09:53,050
Practice working with the code in order to practice more about what can be done with the document object

141
00:09:53,050 --> 00:09:58,300
model assemblies, as well as some of these utility functions that are available within JavaScript.

142
00:09:58,330 --> 00:09:59,650
Thanks again for taking the.

143
00:09:59,990 --> 00:10:03,350
And if you have any questions or comments I'm always happy to address.