1
00:00:00,180 --> 00:00:01,380
Hey, welcome back.

2
00:00:01,410 --> 00:00:07,350
This lesson, we're going to be processing our data to turn it into compatible formats for a CSFI.

3
00:00:07,670 --> 00:00:11,970
So first of all, taking the array, let's loop through the array contents.

4
00:00:12,270 --> 00:00:19,740
So we've got our array of data within an object called data, and we can use for each in order to loop

5
00:00:19,740 --> 00:00:24,040
through and execute each one of the items that are contained within there.

6
00:00:24,300 --> 00:00:29,330
So these what each item is going to be represented by another roll.

7
00:00:29,340 --> 00:00:34,950
And if we call console logout item, you're going to see that the output is available.

8
00:00:35,190 --> 00:00:37,710
We've got each item and each role.

9
00:00:38,160 --> 00:00:43,390
We can turn this into a string format using JavaScript as well.

10
00:00:43,650 --> 00:00:48,130
So if we want to bring that together, we could use joint applying function.

11
00:00:48,360 --> 00:00:50,370
It's going to turn that into a string value.

12
00:00:50,670 --> 00:00:55,410
So now we've got all of the row contents within a string value and there's a few other things that we

13
00:00:55,410 --> 00:00:59,420
still need to apply where we have to apply the line breaks in between them.

14
00:00:59,640 --> 00:01:04,770
So let's set up a temporary object that we can hold our content in and we'll call that holder.

15
00:01:04,790 --> 00:01:05,540
So let's start out.

16
00:01:05,580 --> 00:01:07,350
We're just going to keep it as blank.

17
00:01:07,650 --> 00:01:12,960
And then every time we're updating any of these values, let's update the value of Holder.

18
00:01:12,990 --> 00:01:17,690
So we're going to add to it and adding the value of the joint role.

19
00:01:17,700 --> 00:01:26,270
So the joint item and we also need to close off by adding in the box again, which is a new line represented.

20
00:01:26,670 --> 00:01:30,720
And then after we've loop through, we can console log out holder.

21
00:01:30,840 --> 00:01:35,250
And this is the data that we're actually going to be adding into our file, ready to create the file,

22
00:01:35,520 --> 00:01:39,540
creating a blank object that we can use for to hold the file.

23
00:01:39,540 --> 00:01:44,230
So creating a variable called file, we need to build the file.

24
00:01:44,400 --> 00:01:49,000
So taking that file, we're going to use the method called new file.

25
00:01:49,350 --> 00:01:55,440
And what this does is that method, in order to build files and access to file contents, we need to

26
00:01:55,440 --> 00:01:57,810
have a few parameters that we need to pass in there.

27
00:01:57,990 --> 00:02:01,880
So one of the parameters that we're passing in is the contents of Holder.

28
00:02:02,010 --> 00:02:07,100
We need to also specify a name and we'll first create a text file and then we'll create a ceasefire.

29
00:02:07,110 --> 00:02:10,580
And we also have to pass in some properties or options.

30
00:02:11,010 --> 00:02:11,940
So let's create those.

31
00:02:12,480 --> 00:02:17,760
And this is an object format where we can specify different types that we can pass.

32
00:02:18,000 --> 00:02:23,010
And this particular type is going to be text as it's going to be a text file that we're first creating

33
00:02:23,010 --> 00:02:27,820
and we'll update it to be a CSFI afterward surpassing in that value.

34
00:02:28,360 --> 00:02:31,590
And next, we need to make a link in order to handle that.

35
00:02:31,600 --> 00:02:32,520
So let's try that.

36
00:02:32,760 --> 00:02:35,250
And we don't see anything being output quite yet.

37
00:02:35,700 --> 00:02:39,880
So let's use some of our dorm values in order to create the link.

38
00:02:39,930 --> 00:02:46,410
So setting up a variable to contain a link, we're going to use document, create elements or creating

39
00:02:46,410 --> 00:02:47,610
an element dynamically.

40
00:02:47,820 --> 00:02:50,400
And the element that we're creating is going to be a hyperlink.

41
00:02:50,410 --> 00:02:51,440
So it's an anchor tag.

42
00:02:52,170 --> 00:02:56,260
We need to also create our new URL for the link.

43
00:02:56,460 --> 00:03:02,130
So setting up a variable to hold you URL and using the method create object you URL.

44
00:03:02,340 --> 00:03:06,030
So we're going to create a link to the file and then our link variable.

45
00:03:06,040 --> 00:03:07,470
Let's set some attributes.

46
00:03:07,870 --> 00:03:13,590
So we're going to set an attribute for the HSF and the attribute for the ATF is going to be the value

47
00:03:13,590 --> 00:03:14,220
of YORO.

48
00:03:14,580 --> 00:03:20,790
Also another variable that we can add in, another set attribute and this attribute is going to be for

49
00:03:20,790 --> 00:03:22,190
download attribute.

50
00:03:22,200 --> 00:03:26,220
And so we're setting this as a value of whatever the file name is.

51
00:03:26,550 --> 00:03:28,770
So let's set up another variable to hold the filename.

52
00:03:28,770 --> 00:03:32,710
And we are passing in that file name within the object as we're constructing it.

53
00:03:32,940 --> 00:03:34,780
So now we can use the variable instead.

54
00:03:34,890 --> 00:03:36,540
So building the file name.

55
00:03:36,720 --> 00:03:44,100
So it's another attribute and then using document body as we're creating this dynamically append child

56
00:03:44,460 --> 00:03:46,620
and the child that we're appending is going to be the link.

57
00:03:47,070 --> 00:03:51,920
And then we're taking that link and we're going to click the link using all JavaScript.

58
00:03:51,930 --> 00:03:52,740
So see what happens.

59
00:03:52,770 --> 00:03:59,160
So now whenever we click this, we created a download option and it's downloading the file.

60
00:03:59,160 --> 00:04:03,420
And you can see it here at the bottom where we've got the file and the contents is opened up in the

61
00:04:03,420 --> 00:04:05,300
text file that we've just created.

62
00:04:05,520 --> 00:04:11,040
So every time we click the download on it, you can see in the bottom of the screen we're adding in

63
00:04:11,040 --> 00:04:12,330
that option for the download.

64
00:04:12,340 --> 00:04:16,200
So let's refresh and you see that that text gets downloaded.

65
00:04:16,380 --> 00:04:19,070
So this is what's dynamically being generated.

66
00:04:19,080 --> 00:04:20,810
We're generating as a text file.

67
00:04:21,330 --> 00:04:25,740
So coming up next, we need to transform this into a CSV as well.

68
00:04:26,040 --> 00:04:32,220
We need to also remove it from our page, because right now within body, you're going to see that we've

69
00:04:32,220 --> 00:04:37,740
got the hyperlink here to download the blob of text and we want to get rid of that.

70
00:04:37,750 --> 00:04:40,410
So we want to actually remove that from the page as well.

71
00:04:40,620 --> 00:04:44,100
So we're adding it and then using JavaScript, we're also going to remove it.

72
00:04:44,110 --> 00:04:47,260
So document body and let's remove that child.

73
00:04:47,280 --> 00:04:48,810
So this is the one that we've created.

74
00:04:49,350 --> 00:04:50,190
We're going to remove it.

75
00:04:50,370 --> 00:04:51,720
So it's not just sitting there.

76
00:04:51,730 --> 00:04:55,110
And also let's set the link style.

77
00:04:55,230 --> 00:04:58,500
And of course, we can't see it because there's no contents within the attribute.

78
00:04:59,080 --> 00:05:04,060
But it is still showing up there, so set our visibility to see and then there's no chance that the

79
00:05:04,060 --> 00:05:05,520
user is actually going to see the file.

80
00:05:05,890 --> 00:05:10,540
So we added to the body and now we removed it from the body and we've downloaded the file.

81
00:05:10,600 --> 00:05:13,270
Coming up next, will transform this into a CSFI.

82
00:05:13,570 --> 00:05:15,170
So go ahead and add this into your project.

83
00:05:15,190 --> 00:05:22,150
I know this was a rather long lesson and the objective here was to be able to use the file object constructor,

84
00:05:22,240 --> 00:05:27,730
create a brand new file, attach some properties to it and make that file downloadable, adding in the

85
00:05:27,730 --> 00:05:31,210
download link and then removing that link after it gets clicked.