Welcome back in this lesson, we're going to do a quick code review, as well as some tweaks to our
code.
And I know the last lesson was fairly long, but we did have to structure all of this data, this JSON
data, in a more usable format.
And that format was already dictated to us in the beginning when we structured our data.
So there's a number of different ways that we could handle this and going through this and iterating
through all the different values, that's one of the best ways to do it.
And usually the way that I work with it is I will use something like JSON lint so I can see the content
and returning back each one of those items, especially within these arrays, and then returning back
and getting that content that I want to make use of so we can remove all of the console messages coming
into our project.
We need a way to load data.
So we've got some default data that's sitting there within the MIT data object.
And I'm going to move some of the stuff up to the top as this is where we're setting and initiating
all of our initial variables as well as our adding in the events.
So make this bigger so we can take a closer look at the content.
So we didn't have any styling.
We did this all with JavaScript, so we didn't have any styling at all.
And this was all done via JavaScript.
So I had a little bit of styling that we were applying to the elements.
And before what we did is we set up a couple elements to create some interaction for the user.
So a button and an output area, we didn't really utilize the output area a whole lot.
We could also put in some messaging and additional content in there as needed.
So we came in first and we set a global variable of Eurail.
And this is because we're going to be constructing a neutral using JavaScript.
And this also gave us the option to check if that you URL exists and clear that out and I'll show you
that function afterwards as well.
The one that we were using was that create object you URL.
And then over here we needed to revoke the object you URL.
Otherwise we can't click and download it over and over again because as it's going to be sitting and
it create some memory leak issues.
So that's always a good way to do that, that keep this globally.
Next, we had a few variables that we needed to set up and one of the variables is the feed ID.
So this also makes it easy if you have different spreadsheets, that you can have different feed IDs
and updated and that can update the feed you URL that you use and give you options to get multiple spreadsheets,
all you have to do is go over to the Google spreadsheet, make sure that it's shared and then using
the object ID of the Google spreadsheet, you use that as the feed ID and then the rest of the URL is
the same.
So whether you're using your project or my project, all of these URLs are going to be the same.
The only thing that ever differs is the speed.
So that's the most important one.
We needed a way to trigger the loading of the content.
So we made sure that our dorm has loaded and that was the ideal spot to load the JSON data.
We've got some default.
My data that we were using originally and this can also stay into the project in case for whatever reason
you have some problems loading the data or the data is taking a long time to load this way.
The user is actually going to get something.
So you could use Gleave this into your project or you could remove it out.
And this also serves as a way to structure the content that we need within our CSV file.
So it's also a good indicator of how to structure the content.
Next, we select the elements from the page and created them as objects in our JavaScript and for the
button one, we added some styling and then added an event listener.
And whenever that gets clicked, then what we're doing is we're sending the my data to create the CSV
function.
This was the load Jason function.
This is the one that we did in the last lesson and it was fairly complex and mainly because of our JSON
feed was so complex that we had to.
So we did the fetch return back the JSON object and then returned it back as a JSON data object and
then using a variable called data.
That's where we had all of the data.
And because the data, it was a huge object, it had a feed and entry.
Entry is the one where it contained all of the rows and columns of information.
So that's the one that we went to to use and we used for each to loop through each one of those rows.
We set up a few different arrays.
So one was our main arrays.
So this is the one that we're going to use in order to build out our my data structure.
And we also wanted one for heading, because the way that the Google sheet works is that the headings
as their object names, it's fairly difficult to add it into an array because it will skip the first
row and treat it as a heading.
So we need it to have a separate array in order to add that in.
And that's where we also did the first run.
So we want the first time through in order to update headings so that we could add it into the main
array as our first item within that array.
So next we loop through, so we got a key as an items we saw with an item, we had a whole bunch of
content that was being returned back and we want it to loop through that content.
So it wasn't an object format.
So we created a loop of what the object content where we were getting the object value, the paired
values as key and returning it through item.
Then what we were looking for is if Key had a starting value of sex and we know if it was starting value
of sex, that was one of the values that we wanted to use.
And the sex indicated that sex ed had a dollar sign and then it had the heading as the object key.
So we also used that in order to get the object number.
So we're doing item key, but we could also use the T dollar sign.
So this is where the actual content was held and this is where we were getting the heading.
So we're building up that first item in our array.
So checking again to see if it's first run.
And if it is, we're adding item as our are the heading array as our first item in the array.
And then we weren't running it again.
So then this was only run for the first time to get the heading information and pushing it into the
main array.
And then afterwards we're just pushing the holder items in.
So going through all of that and as we iterate it through, we slowly built out main array and then
once we've created the main array object, we assign it to my data.
So that effectively removed this and added in the contents coming from our spreadsheet.
We also had a function in order to create our CEV.
So this was a CSV function so we can send any type of data in there.
So if we had multiple spreadsheets, multiple data, we can use the same function to create the CSV.
We needed a file in order to hold our contents as well as another variable in order to build our content.
So we set those up as some default variables.
We also checked to see if the URL exists and this was where we're revoking the object URL and we're
creating that object.
You URL, we need it to create a file name.
So this file name can also be dynamic.
You can change the values.
So right now it's just always calling it test CSFI.
You could call it something else.
We needed also to when we create the file object, we need IT properties.
So we needed a file name.
We need needed properties.
So properties, you can specify the type of file you're creating.
We saw earlier that we can create a text file or we can take CSV file.
So this is the format to create a CSFI file, the different types we loop through all of the contents
of data.
So because this was in an array format, we loop through all of them and we had to make sure that we're
cleaning up the items that are contained within that array because we saw that if we had commas in there
and a few other characters or line breaks, that they could potentially create issues.
So we had to wrap around with the double quotes in order to break out and be able to utilize that those
those characters in our string.
So we built and we restructured the cell, always making sure that it's within a string format, of
course, and then returning it back as a clean version.
So just using that function to clean it.
And as we clean those rows of contents, then the next row is just indicated with the line break.
Next, we created the file.
So using the new file, the object creator, we passed in our content and we also passed on a file name
and then some properties in order to make it downloadable so the user doesn't have to click a link.
We created a hyperlink dynamically, we attached the user, else we created you are an object.
We set the attribute of the link as the URL.
We set the attribute of the download as the file name.
We made it in visibility as hidden, even though there's no content within that anchor text.
We did make it hidden just in case.
And so this is invisible to the user.
We appended it to the body.
We initiated the click of that link and then we removed it from the body.
So we move child.
So we still have that link object.
And then lastly, so what that did is that created the click on the link and made it download when we
ever we clicked that main button within our HTML.
So it's a quick run through of the code and you're welcome to try it out for yourself.
And I do encourage you to take the source code that has been provided and see what you can do with it.
Practice working with the code in order to practice more about what can be done with the document object
model assemblies, as well as some of these utility functions that are available within JavaScript.
Thanks again for taking the.
And if you have any questions or comments I'm always happy to address.