1 00:00:00,060 --> 00:00:06,810 In this lesson, we're going to make our request to the end data from the sheet and as you can see, 2 00:00:06,810 --> 00:00:12,930 there's a lot of data here and we need to pass through it in order to reconstruct in only pick out the 3 00:00:12,930 --> 00:00:14,220 information that we need. 4 00:00:14,400 --> 00:00:16,650 So, again, quite a bit of values there. 5 00:00:16,650 --> 00:00:18,690 And all of the sheet data is there. 6 00:00:19,200 --> 00:00:21,500 We just need to be able to select it properly. 7 00:00:21,750 --> 00:00:27,900 So we're going to navigate through the content that JSON object and reconstruct the JavaScript object. 8 00:00:28,140 --> 00:00:34,320 So we'll create a function and the function is going to be the same as what we did in the earlier lessons 9 00:00:34,320 --> 00:00:38,080 within the other application where we're making our request over. 10 00:00:38,100 --> 00:00:41,670 So that was just a fetch request that was loading the data. 11 00:00:41,880 --> 00:00:46,680 And instead of loading the questions, now we've got our Yooralla is going to be different. 12 00:00:47,280 --> 00:00:53,640 So let's add in a function that's going to load the questions and it's going to connect to the JSON 13 00:00:53,640 --> 00:00:56,730 object and then output JSON object. 14 00:00:57,090 --> 00:01:01,410 And for all of the rest of this stuff here, we can clear that out. 15 00:01:01,710 --> 00:01:06,360 And as we're going to be constructing this separately and the only other one that we do need to have 16 00:01:06,360 --> 00:01:12,550 is the questions object so that we can populate the questions properly as we load through the data. 17 00:01:12,990 --> 00:01:19,950 So let's make sure that we can connect to the feed and open it up within the console. 18 00:01:20,250 --> 00:01:26,550 And you can also output it onto the page as string of content if you want. 19 00:01:26,850 --> 00:01:31,590 And that will just output the content as stratified content. 20 00:01:35,350 --> 00:01:40,960 So that gives us our massive JavaScript object and as well, if you want to use the lint. 21 00:01:44,660 --> 00:01:52,220 So that the data is more readable, you can also check to do the valid JSON and this actually makes 22 00:01:52,220 --> 00:01:54,680 it a lot more readable that we can see the content. 23 00:01:55,610 --> 00:01:58,070 We've got the author information there. 24 00:01:58,610 --> 00:02:01,490 We've got the feed. 25 00:02:01,640 --> 00:02:09,110 So within the feed, this is where all of our object information is that we need to access and within 26 00:02:09,110 --> 00:02:10,250 the entries. 27 00:02:12,680 --> 00:02:20,690 We've got a listing of all of the items there, so all of the rows, so entry is an array, so let's 28 00:02:21,200 --> 00:02:24,570 try to select that and then within the entry array. 29 00:02:24,740 --> 00:02:27,590 This is where the content is that we want to access. 30 00:02:28,250 --> 00:02:35,390 So first thing that we want to do is start breaking apart this JSON content and getting to what exactly 31 00:02:35,390 --> 00:02:36,330 we want to access. 32 00:02:36,740 --> 00:02:43,400 So having all of that information, let's go ahead and select from the feed. 33 00:02:43,410 --> 00:02:46,700 So the feed is the first object that we want to select. 34 00:02:51,040 --> 00:02:55,150 And a lot of times it's good to just kind of go property value by property value. 35 00:02:57,760 --> 00:03:03,700 So that way now we've got the feed and we've got entry, so entry is the one that we're after because 36 00:03:03,700 --> 00:03:05,890 this is going to be the data for each one of the rows. 37 00:03:06,130 --> 00:03:15,340 And as you can see, if I update the number of rows, I get updated entries that correspond to the rules. 38 00:03:15,340 --> 00:03:24,010 So I've got nine entries there, nine rows within the data, and it by default will take the first row. 39 00:03:26,030 --> 00:03:32,090 As the object property name, so that's why it's good when you are creating your sheet that you use 40 00:03:32,090 --> 00:03:39,350 the first row as the object name and you can see that as well, that the object names are at the top 41 00:03:39,350 --> 00:03:42,380 and it starts the first item is going to be. 42 00:03:44,450 --> 00:03:45,620 The first entry there. 43 00:03:48,150 --> 00:03:55,440 And it's just returning back the values so got question option, it's using this giant dollar sign and 44 00:03:55,440 --> 00:03:59,550 then whatever the header is of that particular column. 45 00:04:03,360 --> 00:04:07,110 So I just remove out the excess rose. 46 00:04:09,670 --> 00:04:12,440 And let's go back and we'll load the data. 47 00:04:12,880 --> 00:04:21,190 So we need to loop through the entry so till we get to the actual array, so you should you want to 48 00:04:21,190 --> 00:04:25,050 see something like this where you've got an array of the object information. 49 00:04:25,330 --> 00:04:30,220 And at this point, this is where you can actually iterate through the contents and you can loop through 50 00:04:30,220 --> 00:04:31,000 each one of those. 51 00:04:31,840 --> 00:04:33,100 So let's do that as well. 52 00:04:33,790 --> 00:04:43,870 We don't need to output it anymore to the page so you can take the data feed and entry. 53 00:04:46,570 --> 00:04:54,100 And then using a for each loop, just as we did before, we can loop through each one of the elements 54 00:04:54,580 --> 00:04:59,860 that are within the feed and I'll just rename that to Al. 55 00:05:03,340 --> 00:05:05,890 So that gives us each one of them separated. 56 00:05:11,020 --> 00:05:16,570 And now we want to loop through all of these objects and we only want to pick up the ones that have 57 00:05:16,690 --> 00:05:21,610 the prefix of Jesus X dollar sign with whatever the header is. 58 00:05:21,800 --> 00:05:23,830 So the rest of the stuff we don't need. 59 00:05:26,800 --> 00:05:36,160 And the other option is to take the content dollar sign T and use the JSON pass to pass this back into 60 00:05:36,160 --> 00:05:37,210 an object format. 61 00:05:40,740 --> 00:05:49,350 So let's select that first and we'll do a content and that outputs the content, so we want to return 62 00:05:49,350 --> 00:05:51,660 back the dollar sign T. 63 00:05:55,890 --> 00:05:59,560 And now we've just got all of the content being logged in. 64 00:06:00,660 --> 00:06:06,330 Now one of the problems here is that this content, although it's comma, separated, we're not able 65 00:06:06,330 --> 00:06:09,030 to parse it as a JavaScript object. 66 00:06:10,770 --> 00:06:12,120 So it is rather difficult. 67 00:06:12,120 --> 00:06:19,470 We'd have to restructure it if we were to take this into a LENTE program and add in these options and 68 00:06:19,490 --> 00:06:21,540 get rid of some of them so we don't have as many. 69 00:06:21,810 --> 00:06:31,950 We would have to wrap it with an array and then it still wouldn't be valid as each one of these would 70 00:06:31,950 --> 00:06:35,580 need to be an object and they'd have to be, comma, separated. 71 00:06:35,850 --> 00:06:38,010 We also need to have the quotes around them. 72 00:06:38,220 --> 00:06:46,110 So it does take quite a bit of formatting to to get the proper structure for each one of these items. 73 00:06:47,340 --> 00:06:53,100 So there is an option to either to go through and create the proper structure. 74 00:06:53,250 --> 00:06:59,880 So that way you're got valid JSON or we could look to some of the other data that we're collecting there 75 00:06:59,880 --> 00:07:03,880 and we can just loop through each one of these as these are already objects. 76 00:07:04,230 --> 00:07:11,820 So depending on which way you want to go, we can get the key value and check to see if the first part 77 00:07:11,820 --> 00:07:14,310 of the string is going to be X dollar sign. 78 00:07:14,430 --> 00:07:18,080 And if it is, then we know that we've got a valid column of data. 79 00:07:18,450 --> 00:07:22,470 So let's do that instead where as we loop through them. 80 00:07:24,960 --> 00:07:28,350 Will also loop through and get the key. 81 00:07:29,810 --> 00:07:31,250 In the elements. 82 00:07:33,950 --> 00:07:43,080 And will console lock out all of the key values, so that gives us all of the keys for the data. 83 00:07:43,760 --> 00:07:47,360 And now we just need to focus on the ones that have the sex. 84 00:07:47,600 --> 00:07:53,340 And it again, it is using the header that it's selecting those values. 85 00:07:54,050 --> 00:08:05,390 So let's check to see if the key and using JavaScript string method, check the substring starting at 86 00:08:05,390 --> 00:08:12,580 zero to index value of three is equal to gay sex. 87 00:08:13,520 --> 00:08:18,000 And if it is, then that's the key that we're going to output into the console. 88 00:08:18,020 --> 00:08:19,310 So let's do that. 89 00:08:19,310 --> 00:08:26,890 So now we should only list out the ones that have the sex value and elsewhere looping through. 90 00:08:27,110 --> 00:08:36,820 Let's create our holding array so that we can reconstruct the JavaScript object from the JSON data. 91 00:08:37,370 --> 00:08:39,050 So we do have the key. 92 00:08:39,260 --> 00:08:45,710 And in order to get the value, we can get the value by using the key so we can do it this way. 93 00:08:46,790 --> 00:08:50,660 And that gives us the value of the item within the object. 94 00:08:50,990 --> 00:08:56,890 And if we only want to just get the string value, we need to separate it out as the object. 95 00:08:57,200 --> 00:08:59,690 So returning back the dollar sign T. 96 00:09:03,130 --> 00:09:11,800 So do the dollar sign T, and now that returns back all of the values from the columns so we can use 97 00:09:11,800 --> 00:09:20,080 that and populate it into the Holder array and we want to construct the questions data the same way 98 00:09:20,080 --> 00:09:24,850 that we did with the initial one where we've got all of the incorrect ones. 99 00:09:25,090 --> 00:09:29,430 And so we're adding those into an array and then also updating it. 100 00:09:29,440 --> 00:09:34,210 So let's copy this and we want to push it into the questions. 101 00:09:38,080 --> 00:09:44,350 So I've got to just copy so we can mimic the same structure and ultimately push it into questions, 102 00:09:44,650 --> 00:09:52,480 so now that we've got all of the options and we've got the question as well first as well as options 103 00:09:52,480 --> 00:09:58,830 and information, so we can also check whatever the value is of the key as well. 104 00:09:59,410 --> 00:10:08,020 So let's do a console log and log out the key and we can use that to check what the value is going to 105 00:10:08,020 --> 00:10:08,210 be. 106 00:10:08,230 --> 00:10:12,220 So if we're looking for one, that is the question. 107 00:10:12,390 --> 00:10:14,930 So the first one where we're looking for. 108 00:10:15,040 --> 00:10:16,210 Good question. 109 00:10:21,070 --> 00:10:27,640 We can do a condition and then that way we can populate the question into an object and as well we can 110 00:10:27,640 --> 00:10:31,330 get the correct answer, which is going to be the first one under the object. 111 00:10:31,330 --> 00:10:31,890 Correct. 112 00:10:32,230 --> 00:10:35,080 And then blue is all of the options. 113 00:10:35,080 --> 00:10:39,640 We're just going to loop through any ones that have options and have values, and then they're going 114 00:10:39,640 --> 00:10:45,760 to go into the additional options that we have and they're all going to be false, whereas the first 115 00:10:45,760 --> 00:10:46,680 one is going to be true. 116 00:10:47,260 --> 00:10:52,840 So I know this one is fairly complex and it does take a little bit of time to get used to being able 117 00:10:52,840 --> 00:10:58,380 to pass out the data from such a complex JSON object that we also want to get the header. 118 00:10:58,660 --> 00:11:03,520 So do that and we'll create the header from the key value. 119 00:11:03,940 --> 00:11:06,730 So the header is going to just slice. 120 00:11:06,790 --> 00:11:11,410 We only need to do that when we're selected the right value. 121 00:11:11,860 --> 00:11:23,590 And so let's set this as header and taking the key and using slice and the starting position of slice 122 00:11:23,590 --> 00:11:25,350 is going to be with the index value of four. 123 00:11:25,870 --> 00:11:27,940 So let's see what we've got now for headers. 124 00:11:29,410 --> 00:11:33,100 So that stripped out the just to the object name. 125 00:11:33,100 --> 00:11:38,380 So we've got the question and we've got the correct and all of the options. 126 00:11:39,880 --> 00:11:47,440 So now we can begin to construct the same format as we have here or we've got the main temp and then 127 00:11:47,440 --> 00:11:48,940 pushing it into questions. 128 00:11:53,350 --> 00:12:01,030 So that's going to be our main template and then we'll push that into the questions, so this is all 129 00:12:01,030 --> 00:12:09,460 going to be done within that condition, whatever the sex is proper, then we can use the mean content 130 00:12:11,530 --> 00:12:13,480 and the correct question. 131 00:12:14,650 --> 00:12:19,480 So we'll select that mean template and keep it outside. 132 00:12:19,870 --> 00:12:21,870 And then let's update the question. 133 00:12:21,910 --> 00:12:31,210 So if the header is equal to question, then we know that this is going to be the main question. 134 00:12:31,480 --> 00:12:43,030 So we'll take the main object and add to question and equal whatever the value is that's contained in 135 00:12:43,030 --> 00:12:47,480 here and also for the correct answer. 136 00:12:48,130 --> 00:12:56,470 So if the header is correct, then let's set the value as whatever the correct value is. 137 00:12:56,890 --> 00:13:00,150 And then the last one is that we just need to load all of the options. 138 00:13:01,060 --> 00:13:03,670 So we're pushing that content. 139 00:13:04,810 --> 00:13:08,590 The main content in and these are just console messages. 140 00:13:12,750 --> 00:13:20,820 And also, let's break apart the value so that we can just reference the value here and this is the 141 00:13:20,820 --> 00:13:26,960 value from the key, so it looks a lot simpler and cleaner within the code. 142 00:13:28,230 --> 00:13:35,550 And then as we build this before we conclude this lesson, let's console logout questions. 143 00:13:38,730 --> 00:13:45,240 So it looks like something went wrong there, that we ended up with too many questions and again, we 144 00:13:45,240 --> 00:13:50,640 only want to append it and add it if we've populated content. 145 00:13:50,640 --> 00:13:52,080 So let's refresh it. 146 00:13:53,760 --> 00:13:57,510 And it still looks like we're still getting some blank values. 147 00:13:59,950 --> 00:14:03,910 And those are the blank values are for the options array. 148 00:14:04,420 --> 00:14:11,290 So if it's not within correct and if it's not within question, then we want to skip through as we're 149 00:14:11,290 --> 00:14:16,060 looping through each one of the items, each one of the keys. 150 00:14:18,580 --> 00:14:28,420 So let's update these to be else, if and if it's not a question, if it's not correct, then what we're 151 00:14:28,420 --> 00:14:31,960 going to do is we're going to add this value into the options. 152 00:14:37,220 --> 00:14:48,410 And I'll move the main item back outside, so as we're iterating through, we can update that main content 153 00:14:48,410 --> 00:14:48,640 there. 154 00:14:49,010 --> 00:14:55,550 So if it's not the correct if it's not a question and if the value is going to be options. 155 00:15:00,130 --> 00:15:02,520 That we're going to add to the holder array. 156 00:15:07,950 --> 00:15:10,840 The object structure, and this is one of the options. 157 00:15:11,370 --> 00:15:17,790 So if the value length is greater than zero, 158 00:15:21,330 --> 00:15:25,230 then we're going to add that item into the array, the holder array. 159 00:15:29,880 --> 00:15:36,060 And let's just create a temporary object and then this is the one that we're going to push into the 160 00:15:36,060 --> 00:15:36,370 arena. 161 00:15:37,020 --> 00:15:42,570 So within the temporary object, so we have an array for options. 162 00:15:42,570 --> 00:15:46,710 So it's the same where we've got the response and we've got whether it's correct or not. 163 00:15:48,090 --> 00:15:52,050 And we can actually get rid of the Holder object altogether. 164 00:15:54,120 --> 00:15:55,410 And we're not going to be using that. 165 00:15:55,430 --> 00:15:57,480 We're just going to push it into the options. 166 00:15:57,930 --> 00:16:06,300 So whatever the value of Tempus and then within temp, we've got the object information of the response, 167 00:16:06,420 --> 00:16:11,540 which is going to be the value and whether it's correct or not. 168 00:16:11,550 --> 00:16:14,400 So they're all going to be false for the options. 169 00:16:14,760 --> 00:16:18,160 And the only correct one is going to be this value. 170 00:16:18,180 --> 00:16:24,210 So if it is correct, so we need to add that in and set that to be true. 171 00:16:24,510 --> 00:16:28,920 And let's move the main temp outside of the loop. 172 00:16:30,090 --> 00:16:38,250 We're constructing all of the options and also move the push of mean temp outside as well. 173 00:16:40,140 --> 00:16:49,480 So that returns back the structured array where we've got the correct is blue and all of the options. 174 00:16:49,500 --> 00:16:51,090 So we've got the correct answer. 175 00:16:51,360 --> 00:17:00,770 We've got the question within the structure and as well, we've got the green value, all of the options. 176 00:17:00,780 --> 00:17:05,010 And this, again, is coming from our sheet. 177 00:17:06,090 --> 00:17:11,550 And then the last question and the response options for the question. 178 00:17:12,090 --> 00:17:18,990 So now if we dynamically update the content that we have within the spreadsheet, it should also update 179 00:17:19,080 --> 00:17:20,690 what we have for our quiz. 180 00:17:21,270 --> 00:17:26,320 So if we were to add a bunch more items and just do a quick refresh. 181 00:17:26,370 --> 00:17:28,860 So now we've got 15 questions. 182 00:17:29,190 --> 00:17:32,990 We've got the options array, the questions and the correct answer. 183 00:17:33,300 --> 00:17:40,590 So I know this one has been fairly difficult and you will encounter fairly complex JSON objects. 184 00:17:41,220 --> 00:17:44,750 So looping through and getting to the object data. 185 00:17:44,850 --> 00:17:50,670 So get into the array part of it that you can iterate through, use the different for loops. 186 00:17:50,850 --> 00:17:56,910 And also if you want to get the object keys you can use for where you checking to get the key within 187 00:17:56,910 --> 00:17:57,920 the element value. 188 00:17:58,500 --> 00:18:04,260 And that way you can pass through a lot of the data and extract out exactly what you need. 189 00:18:04,440 --> 00:18:11,070 And you can construct your own JavaScript object that you need for your application within the structure 190 00:18:11,070 --> 00:18:12,690 that you need it for to work. 191 00:18:14,450 --> 00:18:20,370 So I know this has been a fairly complex lesson and it is important to learn how to extract JSON data 192 00:18:20,490 --> 00:18:24,330 and sometimes they are complex with a lot of objects and arrays within them. 193 00:18:24,630 --> 00:18:31,980 So load JSON from the sheet, extract the values that you need from the sheet data and get the rows 194 00:18:31,980 --> 00:18:33,510 and columns of data out. 195 00:18:33,900 --> 00:18:38,820 And a number of ways that we've shown within this lesson how you can pull that and get that data out, 196 00:18:39,300 --> 00:18:42,850 check the object, key values using loops. 197 00:18:42,870 --> 00:18:47,850 So either the for loop to get the key values and return back the property values. 198 00:18:48,360 --> 00:18:54,000 If it is one of the properties that you want to pick up, also iterate through the array of entries 199 00:18:54,210 --> 00:18:59,960 and then rebuild your JavaScript object as needed for your application. 200 00:18:59,970 --> 00:19:06,330 And we saw earlier that when we're using a more simple JSON format, we constructed a JavaScript object 201 00:19:06,330 --> 00:19:07,440 from the JSON file. 202 00:19:07,590 --> 00:19:13,170 So we've done the same thing here where we've got just a more complex JSON object and we've reconstructed 203 00:19:13,170 --> 00:19:16,560 the JavaScript object that our application needs to work with. 204 00:19:16,920 --> 00:19:19,890 So you need to do all of this before you can move on to the next lesson. 205 00:19:20,080 --> 00:19:25,740 We're going to finalize the application, creating a quiz running from data that's sitting within a 206 00:19:25,740 --> 00:19:26,280 spreadsheet.