Hey, welcome back.
This lesson, we're going to be processing our data to turn it into compatible formats for a CSFI.
So first of all, taking the array, let's loop through the array contents.
So we've got our array of data within an object called data, and we can use for each in order to loop
through and execute each one of the items that are contained within there.
So these what each item is going to be represented by another roll.
And if we call console logout item, you're going to see that the output is available.
We've got each item and each role.
We can turn this into a string format using JavaScript as well.
So if we want to bring that together, we could use joint applying function.
It's going to turn that into a string value.
So now we've got all of the row contents within a string value and there's a few other things that we
still need to apply where we have to apply the line breaks in between them.
So let's set up a temporary object that we can hold our content in and we'll call that holder.
So let's start out.
We're just going to keep it as blank.
And then every time we're updating any of these values, let's update the value of Holder.
So we're going to add to it and adding the value of the joint role.
So the joint item and we also need to close off by adding in the box again, which is a new line represented.
And then after we've loop through, we can console log out holder.
And this is the data that we're actually going to be adding into our file, ready to create the file,
creating a blank object that we can use for to hold the file.
So creating a variable called file, we need to build the file.
So taking that file, we're going to use the method called new file.
And what this does is that method, in order to build files and access to file contents, we need to
have a few parameters that we need to pass in there.
So one of the parameters that we're passing in is the contents of Holder.
We need to also specify a name and we'll first create a text file and then we'll create a ceasefire.
And we also have to pass in some properties or options.
So let's create those.
And this is an object format where we can specify different types that we can pass.
And this particular type is going to be text as it's going to be a text file that we're first creating
and we'll update it to be a CSFI afterward surpassing in that value.
And next, we need to make a link in order to handle that.
So let's try that.
And we don't see anything being output quite yet.
So let's use some of our dorm values in order to create the link.
So setting up a variable to contain a link, we're going to use document, create elements or creating
an element dynamically.
And the element that we're creating is going to be a hyperlink.
So it's an anchor tag.
We need to also create our new URL for the link.
So setting up a variable to hold you URL and using the method create object you URL.
So we're going to create a link to the file and then our link variable.
Let's set some attributes.
So we're going to set an attribute for the HSF and the attribute for the ATF is going to be the value
of YORO.
Also another variable that we can add in, another set attribute and this attribute is going to be for
download attribute.
And so we're setting this as a value of whatever the file name is.
So let's set up another variable to hold the filename.
And we are passing in that file name within the object as we're constructing it.
So now we can use the variable instead.
So building the file name.
So it's another attribute and then using document body as we're creating this dynamically append child
and the child that we're appending is going to be the link.
And then we're taking that link and we're going to click the link using all JavaScript.
So see what happens.
So now whenever we click this, we created a download option and it's downloading the file.
And you can see it here at the bottom where we've got the file and the contents is opened up in the
text file that we've just created.
So every time we click the download on it, you can see in the bottom of the screen we're adding in
that option for the download.
So let's refresh and you see that that text gets downloaded.
So this is what's dynamically being generated.
We're generating as a text file.
So coming up next, we need to transform this into a CSV as well.
We need to also remove it from our page, because right now within body, you're going to see that we've
got the hyperlink here to download the blob of text and we want to get rid of that.
So we want to actually remove that from the page as well.
So we're adding it and then using JavaScript, we're also going to remove it.
So document body and let's remove that child.
So this is the one that we've created.
We're going to remove it.
So it's not just sitting there.
And also let's set the link style.
And of course, we can't see it because there's no contents within the attribute.
But it is still showing up there, so set our visibility to see and then there's no chance that the
user is actually going to see the file.
So we added to the body and now we removed it from the body and we've downloaded the file.
Coming up next, will transform this into a CSFI.
So go ahead and add this into your project.
I know this was a rather long lesson and the objective here was to be able to use the file object constructor,
create a brand new file, attach some properties to it and make that file downloadable, adding in the
download link and then removing that link after it gets clicked.