Welcome back.
In this lesson, we're going to make things even more interesting, so previously we saw how we could
download a file and we could open it up.
So we're creating a CSV file on the fly.
Now, wouldn't it be more interesting if we're getting this data from different data sources?
And that's also possible as long as we've got that same structure of our data.
So if we do have a different data source, all we need to do is structure the my data and we can grab
it via an Ajax or Fetch request and return it back into our project.
So that's what we're going to do in this lesson.
We're going to use a Google spreadsheet and dynamically load the Google spreadsheet data as the my data
in order to download the CSV file.
And this is going to be coming directly from the Google spreadsheet as the page loads.
We're going to download that object and then utilize it the same way as we did within our code.
So now going over to Google your Google account and obviously you do need to have a Google account in
order to create a spreadsheet.
Let's create a brand new Google spreadsheet, Doc.
So it's just a regular standard sheet.
You've got this ability on Google if you do have a Google account and most people do in order to create
spreadsheets and we can call a test project and then we need some values.
We need a course rating.
And so let's populate some values here.
So Lorence JavaScript beating and hell.
And so here we can just add in some additional content and we'll come up, separate out the content
that gives us some content to work with.
Then we'll just keep the sheet called sheet one.
And of course, you can add in your own default content.
So in order to make your spreadsheet that you can get it as a JSON feed using Google, you can go into
the file and under file you have an option to publish to the web.
So go ahead and click publish to the web.
So you've got some options here.
You can do the entire document or you can just do the sheet.
So that's up to you, whatever you want to publish.
And in this case, it actually doesn't matter because we can grab the sheet or we could just do the
entire document.
So in this case, I will just be doing the sheet and you can do publish.
Are you sure you want to publish it?
So this gives you a published you URL, which you can also take a look at and open in your browser and
added in your browser.
And you see you get the content being output, but we're not going to be using that and we're going
to be using the actual sheet ID.
So now that we've published it to the Web, we can take the sheet ID and every Google sheet has its
own unique ID.
You can see it within the euro.
So if you copy this and this is the value that we need to use, I'm going to bring this into the project
because this is a variable that we need to make use of.
So going into our project and this can actually be a concern because it's not going to be changing.
So we can call it something like feed, ID and paste in that feed it.
So this is the Google Feed Object ID.
There's also a euro that we need to create.
So let's create a URL and this URL.
It's going to be fairly long.
So it's located at HTP s and spreadsheet.
Google is the domain dot com and then feeds forward slash list.
And then once we get this Eurail, we're going to post in the browser just to make sure that we did
get the right support.
And this is where we're looking for a feed ID value so we can add that in.
And that's the only thing that's going to be different from my project to your project.
And then you need to specify the seat.
So we're just getting the first sheet and then public and values equals Alz equals Jast.
So allt Jason.
So there's a new URL and we'll console log out the euro.
So let's, let's call this the feed.
So go back into the project and refresh it and there's are you url.
So when we open that you can see that we've got all of the contents within a JSON format of our Google
spreadsheet and you can use a website like a linked website, like there's a few different ones.
There's JSON Lent which is pretty good.
And what this does is this is going to make your JSON data more readable so you can just paste it in
there, validate JSON.
It's valid JSON.
But what it does is it gives when you lintott it structures it in a more readable format.
So it's not just all a bunch of text.
You can see that you do have the actual information that's contained within your spreadsheet contained
here.
So that's what we've got to do next, is where we need to loop through it and we need to pull out this
information within an array format that's going to match the structure that we've got already within
our data that we're exporting to the CSFI.
So you can see the way that it's structured that it.
Has different roles, so under entry, it's got an updated category title content, so it's got all
of the content there as well.
So you can do this one, but the better one to do is the dollar sign and notice that the name is corresponds
with the heading.
So if you change this to test and if you refresh and if you take that and Lintott, I get that now that
geia sex is no longer going to be name, it's going to be test.
So going down to here.
So that's changed the titles and all of the values are contained within dollar sign t so this is the
structure of how it's written, returning that content and then it has the next entry.
So this is within an object format and then the next entry again it's under the heading Sergius X dollars
sign test and then it's got the next row of data and then it's got the last row of data.
So each one of those columns is represented there by Geass X Dollar Sign and then the heading and then
all of the content that's contained within the column.
So that makes it really easy for us to select that content and to pull it out to utilize it within our
JavaScript.
So all we have to do, and I know it doesn't sounds like quite a bit, but it's not really that much
that we just need to structure the data.
So make an AJAX request to get that JSON data and then structure it within the same format.
And then we're actually ready to send it into our create CSV function and we can create a downloadable
CSFI.
So all of that is still to come.
So go ahead and create a spreadsheet that you can use as a data feed, get its ID and then make sure.
So build out the URL and make sure that you can put the Eurail within the browser and you're returning
back JSON that JSON representation of the content and you could also use JSON Lent in order to Lintott
out to take a closer look at the data.
And then coming up next, we're going to restructure that data, pull it in using fetch and then restructure
it.
So that's still to come.