1 00:00:00,680 --> 00:00:01,510 Welcome back. 2 00:00:01,520 --> 00:00:06,680 In this lesson, we're going to make things even more interesting, so previously we saw how we could 3 00:00:06,680 --> 00:00:08,710 download a file and we could open it up. 4 00:00:08,720 --> 00:00:11,380 So we're creating a CSV file on the fly. 5 00:00:11,900 --> 00:00:17,840 Now, wouldn't it be more interesting if we're getting this data from different data sources? 6 00:00:18,020 --> 00:00:23,280 And that's also possible as long as we've got that same structure of our data. 7 00:00:23,420 --> 00:00:28,250 So if we do have a different data source, all we need to do is structure the my data and we can grab 8 00:00:28,250 --> 00:00:33,280 it via an Ajax or Fetch request and return it back into our project. 9 00:00:33,530 --> 00:00:35,210 So that's what we're going to do in this lesson. 10 00:00:35,450 --> 00:00:42,920 We're going to use a Google spreadsheet and dynamically load the Google spreadsheet data as the my data 11 00:00:42,920 --> 00:00:44,930 in order to download the CSV file. 12 00:00:44,930 --> 00:00:50,060 And this is going to be coming directly from the Google spreadsheet as the page loads. 13 00:00:50,180 --> 00:00:55,400 We're going to download that object and then utilize it the same way as we did within our code. 14 00:00:55,880 --> 00:01:01,370 So now going over to Google your Google account and obviously you do need to have a Google account in 15 00:01:01,370 --> 00:01:02,630 order to create a spreadsheet. 16 00:01:02,990 --> 00:01:06,080 Let's create a brand new Google spreadsheet, Doc. 17 00:01:06,320 --> 00:01:08,480 So it's just a regular standard sheet. 18 00:01:09,080 --> 00:01:15,350 You've got this ability on Google if you do have a Google account and most people do in order to create 19 00:01:15,350 --> 00:01:21,760 spreadsheets and we can call a test project and then we need some values. 20 00:01:21,770 --> 00:01:26,060 We need a course rating. 21 00:01:26,480 --> 00:01:29,000 And so let's populate some values here. 22 00:01:29,000 --> 00:01:33,680 So Lorence JavaScript beating and hell. 23 00:01:33,820 --> 00:01:38,860 And so here we can just add in some additional content and we'll come up, separate out the content 24 00:01:38,930 --> 00:01:40,620 that gives us some content to work with. 25 00:01:40,620 --> 00:01:42,950 Then we'll just keep the sheet called sheet one. 26 00:01:43,430 --> 00:01:46,250 And of course, you can add in your own default content. 27 00:01:46,550 --> 00:01:54,620 So in order to make your spreadsheet that you can get it as a JSON feed using Google, you can go into 28 00:01:54,620 --> 00:01:58,280 the file and under file you have an option to publish to the web. 29 00:01:58,670 --> 00:02:00,650 So go ahead and click publish to the web. 30 00:02:00,860 --> 00:02:02,060 So you've got some options here. 31 00:02:02,060 --> 00:02:04,880 You can do the entire document or you can just do the sheet. 32 00:02:05,060 --> 00:02:07,010 So that's up to you, whatever you want to publish. 33 00:02:07,340 --> 00:02:12,590 And in this case, it actually doesn't matter because we can grab the sheet or we could just do the 34 00:02:12,680 --> 00:02:13,470 entire document. 35 00:02:13,670 --> 00:02:17,540 So in this case, I will just be doing the sheet and you can do publish. 36 00:02:17,790 --> 00:02:19,270 Are you sure you want to publish it? 37 00:02:19,490 --> 00:02:24,920 So this gives you a published you URL, which you can also take a look at and open in your browser and 38 00:02:24,920 --> 00:02:26,090 added in your browser. 39 00:02:26,210 --> 00:02:31,610 And you see you get the content being output, but we're not going to be using that and we're going 40 00:02:31,610 --> 00:02:33,860 to be using the actual sheet ID. 41 00:02:34,010 --> 00:02:39,260 So now that we've published it to the Web, we can take the sheet ID and every Google sheet has its 42 00:02:39,260 --> 00:02:40,700 own unique ID. 43 00:02:40,850 --> 00:02:42,580 You can see it within the euro. 44 00:02:43,310 --> 00:02:49,070 So if you copy this and this is the value that we need to use, I'm going to bring this into the project 45 00:02:49,310 --> 00:02:51,560 because this is a variable that we need to make use of. 46 00:02:52,100 --> 00:02:57,410 So going into our project and this can actually be a concern because it's not going to be changing. 47 00:02:57,620 --> 00:03:03,170 So we can call it something like feed, ID and paste in that feed it. 48 00:03:03,200 --> 00:03:06,160 So this is the Google Feed Object ID. 49 00:03:06,740 --> 00:03:09,550 There's also a euro that we need to create. 50 00:03:09,560 --> 00:03:12,350 So let's create a URL and this URL. 51 00:03:12,350 --> 00:03:13,700 It's going to be fairly long. 52 00:03:13,700 --> 00:03:20,540 So it's located at HTP s and spreadsheet. 53 00:03:21,140 --> 00:03:27,140 Google is the domain dot com and then feeds forward slash list. 54 00:03:27,500 --> 00:03:32,240 And then once we get this Eurail, we're going to post in the browser just to make sure that we did 55 00:03:32,240 --> 00:03:34,010 get the right support. 56 00:03:34,610 --> 00:03:39,110 And this is where we're looking for a feed ID value so we can add that in. 57 00:03:39,470 --> 00:03:42,740 And that's the only thing that's going to be different from my project to your project. 58 00:03:43,010 --> 00:03:44,540 And then you need to specify the seat. 59 00:03:44,780 --> 00:03:52,440 So we're just getting the first sheet and then public and values equals Alz equals Jast. 60 00:03:52,520 --> 00:03:53,710 So allt Jason. 61 00:03:53,720 --> 00:03:58,150 So there's a new URL and we'll console log out the euro. 62 00:03:58,370 --> 00:04:01,010 So let's, let's call this the feed. 63 00:04:01,250 --> 00:04:06,050 So go back into the project and refresh it and there's are you url. 64 00:04:06,060 --> 00:04:13,340 So when we open that you can see that we've got all of the contents within a JSON format of our Google 65 00:04:13,340 --> 00:04:19,250 spreadsheet and you can use a website like a linked website, like there's a few different ones. 66 00:04:19,250 --> 00:04:21,290 There's JSON Lent which is pretty good. 67 00:04:21,650 --> 00:04:26,660 And what this does is this is going to make your JSON data more readable so you can just paste it in 68 00:04:26,660 --> 00:04:28,160 there, validate JSON. 69 00:04:28,160 --> 00:04:29,240 It's valid JSON. 70 00:04:29,930 --> 00:04:34,700 But what it does is it gives when you lintott it structures it in a more readable format. 71 00:04:34,700 --> 00:04:36,860 So it's not just all a bunch of text. 72 00:04:36,950 --> 00:04:42,620 You can see that you do have the actual information that's contained within your spreadsheet contained 73 00:04:42,620 --> 00:04:43,010 here. 74 00:04:43,220 --> 00:04:48,260 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 75 00:04:48,260 --> 00:04:54,530 information within an array format that's going to match the structure that we've got already within 76 00:04:54,530 --> 00:04:56,540 our data that we're exporting to the CSFI. 77 00:04:56,780 --> 00:04:59,600 So you can see the way that it's structured that it. 78 00:04:59,670 --> 00:05:07,800 Has different roles, so under entry, it's got an updated category title content, so it's got all 79 00:05:07,800 --> 00:05:09,660 of the content there as well. 80 00:05:09,660 --> 00:05:17,220 So you can do this one, but the better one to do is the dollar sign and notice that the name is corresponds 81 00:05:17,220 --> 00:05:17,860 with the heading. 82 00:05:18,180 --> 00:05:27,880 So if you change this to test and if you refresh and if you take that and Lintott, I get that now that 83 00:05:27,880 --> 00:05:31,980 geia sex is no longer going to be name, it's going to be test. 84 00:05:31,980 --> 00:05:32,930 So going down to here. 85 00:05:32,940 --> 00:05:39,270 So that's changed the titles and all of the values are contained within dollar sign t so this is the 86 00:05:39,270 --> 00:05:43,380 structure of how it's written, returning that content and then it has the next entry. 87 00:05:43,410 --> 00:05:48,940 So this is within an object format and then the next entry again it's under the heading Sergius X dollars 88 00:05:48,940 --> 00:05:54,390 sign test and then it's got the next row of data and then it's got the last row of data. 89 00:05:54,390 --> 00:06:00,420 So each one of those columns is represented there by Geass X Dollar Sign and then the heading and then 90 00:06:00,420 --> 00:06:02,490 all of the content that's contained within the column. 91 00:06:02,880 --> 00:06:09,870 So that makes it really easy for us to select that content and to pull it out to utilize it within our 92 00:06:09,870 --> 00:06:10,550 JavaScript. 93 00:06:10,800 --> 00:06:15,960 So all we have to do, and I know it doesn't sounds like quite a bit, but it's not really that much 94 00:06:15,960 --> 00:06:18,150 that we just need to structure the data. 95 00:06:18,150 --> 00:06:24,330 So make an AJAX request to get that JSON data and then structure it within the same format. 96 00:06:24,450 --> 00:06:30,600 And then we're actually ready to send it into our create CSV function and we can create a downloadable 97 00:06:30,600 --> 00:06:31,200 CSFI. 98 00:06:31,680 --> 00:06:33,370 So all of that is still to come. 99 00:06:33,600 --> 00:06:40,830 So go ahead and create a spreadsheet that you can use as a data feed, get its ID and then make sure. 100 00:06:41,010 --> 00:06:47,340 So build out the URL and make sure that you can put the Eurail within the browser and you're returning 101 00:06:47,340 --> 00:06:55,490 back JSON that JSON representation of the content and you could also use JSON Lent in order to Lintott 102 00:06:55,490 --> 00:06:57,390 out to take a closer look at the data. 103 00:06:57,810 --> 00:07:02,790 And then coming up next, we're going to restructure that data, pull it in using fetch and then restructure 104 00:07:02,790 --> 00:07:02,990 it. 105 00:07:03,000 --> 00:07:03,840 So that's still to come.