1 00:00:00,060 --> 00:00:06,210 Now that we set up a feed you, Earl, we need to get that information restructured and build out our 2 00:00:06,210 --> 00:00:13,650 new mydata object with that feed content, and in this case, we can also use that event listener in 3 00:00:13,650 --> 00:00:22,020 order to trigger the retrieval of the feed data and then updating of the content of the mydata object 4 00:00:22,020 --> 00:00:23,610 that we created in the last lesson. 5 00:00:24,090 --> 00:00:31,500 And then over here is we want to load JSON so we create a function in order to load JSON and this function, 6 00:00:31,500 --> 00:00:33,420 I'll move this down afterwards. 7 00:00:33,780 --> 00:00:39,270 So we've got a function where we load the JSON data and we're going to we've already built out our feed 8 00:00:39,270 --> 00:00:42,210 you or else we do have that already in place. 9 00:00:42,220 --> 00:00:45,780 And the other thing that we need to do is we need to create our fetch. 10 00:00:46,230 --> 00:00:54,540 So fetches JavaScript and its promise based method that can do a promise of fetch. 11 00:00:54,690 --> 00:01:01,110 You fetch the Eurail or whatever file location you want to fetch, and then you've got the promise which 12 00:01:01,110 --> 00:01:04,530 is invoked when the content is being returned. 13 00:01:04,830 --> 00:01:11,410 So this is the return of the content from Fetch and then he can string together multiple promises. 14 00:01:11,670 --> 00:01:17,340 So over here we've got the content being returned back and we can also specify that's being returned 15 00:01:17,340 --> 00:01:18,740 back in adjacent format. 16 00:01:19,110 --> 00:01:25,440 So what happens here is we've got our response and within the response, we've got a ton of information 17 00:01:25,440 --> 00:01:25,680 there. 18 00:01:26,010 --> 00:01:28,220 So remember, this is a promise based format. 19 00:01:28,380 --> 00:01:33,420 So once it gets the response, then we can return back a second part to it. 20 00:01:33,570 --> 00:01:39,930 And that's where we can format that content as JSON content and do a return and then add in one more 21 00:01:39,930 --> 00:01:42,360 promise where we can handle that data. 22 00:01:42,600 --> 00:01:48,920 So now it's coming in as data and will console log this part out the step out as well. 23 00:01:49,410 --> 00:01:51,760 So we're getting that content in as data. 24 00:01:52,110 --> 00:01:58,080 So when we refresh first we get the response and then we get the data and the data is all contained 25 00:01:58,080 --> 00:01:59,220 here within the feed. 26 00:01:59,340 --> 00:02:02,130 And this is the exact same stuff that's being output here. 27 00:02:02,430 --> 00:02:05,580 And the one that we're after are the entries you see here. 28 00:02:05,580 --> 00:02:06,500 We've got the entries. 29 00:02:06,510 --> 00:02:08,490 These are the same ones that we looked at earlier with the. 30 00:02:09,420 --> 00:02:14,250 So that's the data that we want to make use of when we're pulling back that feed information. 31 00:02:14,340 --> 00:02:18,620 So what we want to do here is we want to loop through that feed data. 32 00:02:18,780 --> 00:02:26,970 So taking data as we've got it now within the data object, and because it's an object, we can go into 33 00:02:26,970 --> 00:02:33,590 feed and then we can go down to entry and entry contains is an array. 34 00:02:34,020 --> 00:02:40,110 So that means that we can loop through that array, returning back each one of the items that's available 35 00:02:40,110 --> 00:02:40,930 within the array. 36 00:02:41,070 --> 00:02:44,490 So we're going to do another function in here and this can be item. 37 00:02:44,880 --> 00:02:47,790 And so let's console log item now. 38 00:02:47,820 --> 00:02:54,630 And because it is fairly complex, the JSON feed, that's why we got to do a little bit of work here 39 00:02:54,630 --> 00:02:56,610 to try to get to the data that we're looking for. 40 00:02:56,910 --> 00:03:04,290 So now item is being represented in this type of format and we have to break apart item as we loop through 41 00:03:04,290 --> 00:03:04,460 it. 42 00:03:04,710 --> 00:03:10,310 So before we loop through it, I want to return back each one of those item values. 43 00:03:10,320 --> 00:03:12,350 And again, we need to loop through this. 44 00:03:12,360 --> 00:03:17,040 So this is another array of different values here that are contained within the item. 45 00:03:17,910 --> 00:03:21,270 So C item is not just one value that's being returned back. 46 00:03:21,450 --> 00:03:25,880 We've got quite a few of them and I want to loop through each one of those as well. 47 00:03:26,040 --> 00:03:30,510 And because this is an object, we can get the key of the element. 48 00:03:30,750 --> 00:03:33,440 So for let key. 49 00:03:33,780 --> 00:03:36,300 So this is going to return back all of the keys. 50 00:03:36,330 --> 00:03:37,890 So console log. 51 00:03:38,250 --> 00:03:43,440 And I know we've got quite a lot going on in this console and it might be a little bit hard to break 52 00:03:43,440 --> 00:03:49,500 through this, but now we see that we're getting this is item and then these are the keys that we're 53 00:03:49,500 --> 00:03:49,910 seeing. 54 00:03:50,190 --> 00:03:53,880 So the keys that we're interested in are these geia six keys. 55 00:03:53,880 --> 00:04:00,210 Those are the ones that we want to use so we can take the value of key and we can see if it's starts 56 00:04:00,210 --> 00:04:01,230 with sex. 57 00:04:01,230 --> 00:04:06,430 And if it does, then this is a key that we want to look at and we want to add to our larger array. 58 00:04:06,720 --> 00:04:14,310 So using key substring, returning back the first three characters of the key substring and we're checking 59 00:04:14,310 --> 00:04:16,430 to see if it starts with sex. 60 00:04:16,830 --> 00:04:19,500 And if it does, then those are the ones that we're interested in. 61 00:04:19,950 --> 00:04:25,350 There's a little bit of cleaning through here, but as we clean through here, you're going to see that 62 00:04:25,350 --> 00:04:27,720 now we're only returning the ones that have sex. 63 00:04:27,930 --> 00:04:31,500 And remember, these sex ones correspond with the headings. 64 00:04:31,770 --> 00:04:34,980 And this means that we're getting all of the values that we want. 65 00:04:35,220 --> 00:04:40,680 And you can see that as we iterate through each one of those rows, we're getting the values that we 66 00:04:40,680 --> 00:04:40,960 want. 67 00:04:41,250 --> 00:04:47,730 So the next thing that we want to do is we want to split and we want to add to a main holder array. 68 00:04:47,940 --> 00:04:51,010 So we set up a holder array in order to accommodate that. 69 00:04:51,240 --> 00:04:55,020 So setting up another variable and we can call this holder. 70 00:04:55,500 --> 00:04:59,790 And then as we loop through, we can update it and we can put. 71 00:04:59,850 --> 00:05:06,490 Start value and the value that we want to push in is going to be the content after the dollar sign. 72 00:05:06,810 --> 00:05:12,030 So we've got to do one more thing where we take the value of key and then we know that this is the one 73 00:05:12,030 --> 00:05:12,570 that we want. 74 00:05:12,840 --> 00:05:18,690 We're going to split it by the dollar and then we're returning back that first item that's available 75 00:05:18,690 --> 00:05:19,110 for us. 76 00:05:19,560 --> 00:05:25,890 So what's going to be returned back here is those values that are contained. 77 00:05:26,250 --> 00:05:29,330 So we see test course rating and so on. 78 00:05:29,370 --> 00:05:32,160 So these are going to be the heading values. 79 00:05:32,580 --> 00:05:34,710 And we don't actually want the heading value. 80 00:05:34,710 --> 00:05:36,130 We want the T value. 81 00:05:36,600 --> 00:05:38,310 So this is the way to get the heading. 82 00:05:38,470 --> 00:05:41,420 And we can also get the T value if we want. 83 00:05:41,430 --> 00:05:47,700 And this is all possible because this is an object and an object format and return back the value of 84 00:05:47,700 --> 00:05:48,690 T so sure. 85 00:05:48,690 --> 00:05:49,810 What that looks like as well. 86 00:05:49,980 --> 00:05:51,920 So we'll consult logout that. 87 00:05:52,140 --> 00:05:57,480 So now we can see that we're returning back to heading the name heading name, heading name. 88 00:05:57,660 --> 00:06:03,300 And the one that we wanted to add into the array is going to be the the the key. 89 00:06:03,960 --> 00:06:10,440 So after we've loop through all of this, we can console log out holder and you can see that Holder 90 00:06:10,440 --> 00:06:13,350 now is going to contain all of those value. 91 00:06:13,410 --> 00:06:16,940 And the thing is here that this is just that one row of content. 92 00:06:17,250 --> 00:06:21,690 So and we know that the structure that we're looking for and looking to build. 93 00:06:21,820 --> 00:06:23,780 So this is an array within an array. 94 00:06:23,910 --> 00:06:30,290 So we need to set up one more array as our main container that's going to hold all of that information. 95 00:06:30,930 --> 00:06:36,210 So let's set up one more main array and starting out as blank. 96 00:06:36,360 --> 00:06:43,890 And as we iterate through each one of these, then we want to add it to we want to add Holder into the 97 00:06:43,890 --> 00:06:44,560 main array. 98 00:06:45,060 --> 00:06:52,290 So one last piece that we need to do, and this is going to be main array and we're pushing the value 99 00:06:52,290 --> 00:06:53,350 of Holder into it. 100 00:06:53,700 --> 00:06:59,830 So once we finish and once we've finished doing all of the loops, let's put the value of main array. 101 00:06:59,880 --> 00:07:02,470 So we can see what it turns out to be. 102 00:07:02,520 --> 00:07:08,640 So structure is starting to look better and more of kind of what we want, where we've got multiple 103 00:07:08,640 --> 00:07:15,770 arrays within an array and we've got all of the contents there, but we don't quite yet have our headings. 104 00:07:15,770 --> 00:07:17,640 So that's another one that we need to add in. 105 00:07:18,030 --> 00:07:20,260 And there's a number of ways to do that. 106 00:07:20,760 --> 00:07:25,020 So in this case, what we'll do is we'll just create another variable to hold the heading. 107 00:07:25,300 --> 00:07:29,070 We can call this heading and this is another array that's going to hold it. 108 00:07:29,820 --> 00:07:36,870 And then as we loop through, so the first time through, what I want to do is I want to add the values 109 00:07:36,870 --> 00:07:37,650 of this. 110 00:07:38,740 --> 00:07:45,100 Two heading, so we'll check to see if heading and remember, we're getting those those key values there 111 00:07:45,100 --> 00:07:46,360 that we can use. 112 00:07:46,600 --> 00:07:54,640 So we're check to see if heading length and of heading length is we're probably better off to set a 113 00:07:54,640 --> 00:07:55,500 boolean value. 114 00:07:56,530 --> 00:08:01,240 So we call this first run and setting it to. 115 00:08:02,020 --> 00:08:06,320 And only if this is true, then we're going to build another array for heading. 116 00:08:06,670 --> 00:08:07,990 So if first. 117 00:08:09,120 --> 00:08:09,720 Run. 118 00:08:10,040 --> 00:08:17,790 So the first run is true, then what we'll do is we're going to take our heading away and push that 119 00:08:17,790 --> 00:08:18,750 value into it. 120 00:08:18,780 --> 00:08:20,070 So this is the value here. 121 00:08:20,190 --> 00:08:22,650 And remember, this is the heading values. 122 00:08:23,160 --> 00:08:25,320 So we're pushing it into the heading array. 123 00:08:25,890 --> 00:08:31,650 And we're also going to do one more check before we complete that main array and before we add Holder 124 00:08:31,650 --> 00:08:32,520 to the menary. 125 00:08:32,880 --> 00:08:36,180 And that's going to be the check to see if it's first run. 126 00:08:36,990 --> 00:08:43,500 And if it is first run, then we're going to set the value of first run to be false so we don't add 127 00:08:43,500 --> 00:08:45,120 any more to heading. 128 00:08:45,810 --> 00:08:51,570 And we're also going to take the the main array and we're going to push heading into it. 129 00:08:51,990 --> 00:08:56,020 There's quite a bit of work usually in order to structure things the way you need it. 130 00:08:56,580 --> 00:09:01,680 So right now it looks like we've got it fairly good and fairly much as needed. 131 00:09:01,890 --> 00:09:08,520 And we're ready to add in this data into our data instead of using my data. 132 00:09:08,820 --> 00:09:14,790 Now that we've loaded this content, we can add and update the my data as my array. 133 00:09:15,060 --> 00:09:23,100 So now when we refresh and we download and we open up our download value, remember, it's comma separated. 134 00:09:23,320 --> 00:09:27,950 You can see that now we've made a duplicate of what's available in our spreadsheet. 135 00:09:28,410 --> 00:09:31,010 So we've got all of that content there and available. 136 00:09:31,470 --> 00:09:37,740 So I know this was a fairly long lesson and it does take some time to kind of go through and restructure 137 00:09:37,740 --> 00:09:44,100 the data, especially when the JSON feed is this big and it's got so much complexity to it. 138 00:09:44,670 --> 00:09:50,790 So it's not always ideal, but it is something that you can work with and you can restructure. 139 00:09:50,970 --> 00:09:56,580 And if you're not familiar with working with Jason, then I do suggest to use things like Jason Lente 140 00:09:56,700 --> 00:10:01,920 in order to familiarize yourself a little bit better with what's being represented here within this 141 00:10:01,920 --> 00:10:09,120 JSON object, and then also how you can break that apart and get the values that you need in order to 142 00:10:09,120 --> 00:10:15,460 restructure and build out within the format that you need in order to output to a CSFI file. 143 00:10:16,020 --> 00:10:22,650 So go ahead and try it out for yourself and see if you can first restructure the content within the 144 00:10:22,650 --> 00:10:24,890 format that you need in the mydata. 145 00:10:25,080 --> 00:10:30,390 And then once it's there and once it's ready, then you can simply equal my data to the mihiri that 146 00:10:30,390 --> 00:10:36,570 you've built and download the CSFI file and you're going to have that updated version, all the content 147 00:10:36,570 --> 00:10:38,370 coming from the Google spreadsheet. 148 00:10:38,610 --> 00:10:40,850 So come up next, we'll do a quick Coldren.