1 00:00:00,460 --> 00:00:05,880 In this lesson, we're going to start creating the list project and the project that we're working on 2 00:00:05,880 --> 00:00:13,230 is going to be a list coming from JSON data and it's going to output the contents of the JSON data onto 3 00:00:13,230 --> 00:00:17,730 the page within the Web page and give us the opportunity to interact with it with JavaScript. 4 00:00:17,970 --> 00:00:23,670 And as we're connecting to the data, it's got some property names and values here. 5 00:00:23,680 --> 00:00:28,870 So we've got a name for the user and guests and also the status. 6 00:00:29,070 --> 00:00:33,270 So depending on what the status is, we're going to add a different class to it. 7 00:00:33,280 --> 00:00:37,790 So it's going to be read if it's false and green with an underlying if it's true. 8 00:00:38,130 --> 00:00:45,080 So you can go ahead and create your own version of this project, making use of the JSON data. 9 00:00:45,090 --> 00:00:49,650 So let's create our list project that we're going to be doing in this lesson. 10 00:00:49,800 --> 00:00:52,820 I've created a new app for DOT files. 11 00:00:52,830 --> 00:00:53,940 We've already linked to that. 12 00:00:54,220 --> 00:01:01,320 And this is the app for G.S. File where we can create the JSON data and then output that onto the page. 13 00:01:01,560 --> 00:01:05,270 And we're also going to make an interactive list within this lesson. 14 00:01:05,580 --> 00:01:14,160 So let's create a new file and within the new file, create and save this as JSON list so we can just 15 00:01:14,430 --> 00:01:16,050 call it list JSON. 16 00:01:17,460 --> 00:01:24,240 And this is going to be sitting within the same directory as the index app for James and List JSON. 17 00:01:24,570 --> 00:01:27,900 So within here, let's create our first list. 18 00:01:28,170 --> 00:01:33,050 So creating an array and within the array let's structure a few objects. 19 00:01:33,390 --> 00:01:38,520 So we're going to have a list for a party and we're going to have a bunch of names that we're going 20 00:01:38,520 --> 00:01:40,500 to loop through and iterate through. 21 00:01:40,890 --> 00:01:48,630 So the first one is going to be John and then the second one is going to be the number of guests that 22 00:01:48,630 --> 00:01:49,690 John is bringing. 23 00:01:49,890 --> 00:01:52,390 So this is going to be no value. 24 00:01:52,740 --> 00:01:54,240 So let's put it in four or five. 25 00:01:54,570 --> 00:01:57,900 And then lastly, let's do a boolean value for status. 26 00:01:58,260 --> 00:02:06,630 So whether they've confirmed or not that they are coming so false and we'll keep this structure for 27 00:02:06,630 --> 00:02:10,230 all of the items within this list so that we can easily loop through it. 28 00:02:10,500 --> 00:02:15,960 And that's one of the most important things when you are constructing your JSON data and your JSON object 29 00:02:16,170 --> 00:02:22,740 to make sure that the structure of the list is going to be consistent and that you can easily iterate 30 00:02:22,740 --> 00:02:23,590 through the content. 31 00:02:24,000 --> 00:02:30,870 So next up, let's add in some more people and you can copy and paste and use the first structure as 32 00:02:30,870 --> 00:02:38,910 the template and then just update the values that you want to use for the name, for the guests. 33 00:02:38,910 --> 00:02:42,630 And also, we'll just keep that one a false comma separated out. 34 00:02:42,900 --> 00:02:52,380 And as you're constructing this JSON object, you can add in as many names and as many of these objects 35 00:02:52,380 --> 00:02:53,190 as you want. 36 00:02:55,120 --> 00:03:03,080 And let's do one more here and we'll keep this one at true, so that one's true and confirmed. 37 00:03:03,460 --> 00:03:06,000 So now we've got our JSON object. 38 00:03:06,310 --> 00:03:09,820 And next up, we want to bring this into the JavaScript. 39 00:03:10,060 --> 00:03:13,270 So making a selection with our JavaScript. 40 00:03:13,510 --> 00:03:20,500 So we already do have a few places where we can output some content and then we can also as the DOM 41 00:03:20,500 --> 00:03:26,720 content loads that we can make use of the output element and populate some data. 42 00:03:26,740 --> 00:03:35,350 So using the document and query selector, selecting the element with a class of output and if you console 43 00:03:35,350 --> 00:03:37,780 log, it's your selection of the element. 44 00:03:37,990 --> 00:03:43,330 It should log that element into the console and you should be able to hover over it and highlight it 45 00:03:43,330 --> 00:03:44,050 on the page. 46 00:03:44,680 --> 00:03:50,800 Also, let's add in some content so you can do text content and add some content. 47 00:03:53,800 --> 00:03:59,170 And just to make sure that everything is working, so this is where we're going to output the list contents 48 00:03:59,170 --> 00:04:03,420 on the page and we need to connect to the JSON data. 49 00:04:03,880 --> 00:04:10,710 So there is a function within JavaScript that you can listen for the DOM content loaded. 50 00:04:10,930 --> 00:04:13,840 So this is an event that you can set to trigger. 51 00:04:13,960 --> 00:04:18,970 And once the event triggers, then we know that the DOM content has loaded and we're ready to interact 52 00:04:18,970 --> 00:04:20,310 with the Web page content. 53 00:04:21,790 --> 00:04:25,000 So set up a window and add an event. 54 00:04:25,000 --> 00:04:28,860 Listener event that we're listening for is going to be the DOM content loaded event. 55 00:04:28,870 --> 00:04:35,110 So this is an event that fires when the initial HTML document has been completely loaded and passed 56 00:04:35,350 --> 00:04:36,940 without waiting for stylesheets. 57 00:04:36,940 --> 00:04:39,190 Images subframe to finish loading. 58 00:04:39,430 --> 00:04:43,810 So basically, if you are familiar with Jacoway, this is the same thing as document ready. 59 00:04:43,960 --> 00:04:50,050 And it just indicates that the browser has finished loading all of the page elements and that allows 60 00:04:50,050 --> 00:04:53,830 the JavaScript to know that we're ready to start interacting with the content. 61 00:04:54,070 --> 00:04:59,710 They have an example here, window at event listener and that that it's listening for is the DOM content 62 00:04:59,710 --> 00:05:00,160 loaded. 63 00:05:00,340 --> 00:05:06,700 So whenever it fires off, then it's going to run this code so we can also copy and paste it and then 64 00:05:06,700 --> 00:05:08,290 just make sure that it is working. 65 00:05:08,440 --> 00:05:15,070 I'm also going to update the view to the have the word wrap so that we can see the page content. 66 00:05:15,400 --> 00:05:20,890 And now whenever we see that, we see that Dom fully loaded and parsed. 67 00:05:21,130 --> 00:05:24,910 So that means that we've got the DOM content is loaded and ready to go. 68 00:05:25,150 --> 00:05:31,450 So at this point we can make our fach request and making the first request to get the content that we 69 00:05:31,450 --> 00:05:33,000 want to load onto the page. 70 00:05:33,190 --> 00:05:37,090 So creating the list structure and the interaction for the user. 71 00:05:37,270 --> 00:05:44,320 And we're going to make a connection to the list dot JSON file so we can use the format that we saw 72 00:05:44,320 --> 00:05:50,350 in the last lesson where we're making the Thach request with Jason to the JSON file. 73 00:05:50,350 --> 00:05:53,980 So fetch and fetching to whatever the you are Ellas. 74 00:05:54,220 --> 00:06:01,450 And I usually do like to keep the Eurail dynamic so that we'll keep it and make it easy if we do need 75 00:06:01,450 --> 00:06:02,140 to update it. 76 00:06:02,170 --> 00:06:08,050 So currently it's looking at at least JSON and if I do have a Web URL or if I go live and I want to 77 00:06:08,060 --> 00:06:12,970 have data that I can update an adjacent file, then I can just update this Web URL. 78 00:06:12,970 --> 00:06:14,290 I'll show you how to do that as well. 79 00:06:14,600 --> 00:06:22,690 So setting it up as you URL and listening for the promise and then when it does get the response, doing 80 00:06:22,690 --> 00:06:27,020 a return on the response object and returning it as Jason. 81 00:06:27,400 --> 00:06:34,030 So using the built in method to return the content as JSON and then the next promise is going to be 82 00:06:34,060 --> 00:06:35,830 where we get the data back. 83 00:06:36,280 --> 00:06:40,600 And once we get the data back, you can also wrap it within another bracket if you want. 84 00:06:40,870 --> 00:06:43,750 So depending on how you want to output the content. 85 00:06:44,320 --> 00:06:49,540 So loading and getting the data out and. 86 00:06:53,930 --> 00:07:00,680 Just fix up the brackets there, so once we have the data, first off, let's just make sure that we 87 00:07:00,680 --> 00:07:01,650 did get the data. 88 00:07:01,790 --> 00:07:06,110 So log it out into the console and the way that it gets logged out. 89 00:07:06,350 --> 00:07:11,320 So this data value variable is going to be an array. 90 00:07:11,390 --> 00:07:12,680 And so we've got an A length. 91 00:07:12,920 --> 00:07:16,960 And with arrays, we know that it's really easy to loop through the arrays. 92 00:07:17,330 --> 00:07:26,390 So let's loop through the data object and using for each well, loop through the the array returning 93 00:07:26,390 --> 00:07:27,290 back to element. 94 00:07:29,400 --> 00:07:37,710 And we'll consul logout each one of the elements on the page, so that breaks apart each one of the 95 00:07:37,710 --> 00:07:40,170 items that is contained within the JSON file. 96 00:07:40,860 --> 00:07:47,910 So doing it this way makes it really easy to work with the content now in order to add it to the page. 97 00:07:48,010 --> 00:07:50,720 Going to create a separate function that's going to handle that. 98 00:07:51,690 --> 00:07:57,360 So let's set up a function and I'll just make the list. 99 00:07:57,480 --> 00:08:04,170 It's actually going to be making the list item and give it an attribute and argument name of item and 100 00:08:04,170 --> 00:08:05,570 I'll move up the code. 101 00:08:05,760 --> 00:08:11,190 So the idea is that as we loop through each one of these objects, we're going to construct each one 102 00:08:11,190 --> 00:08:13,710 of those items and add them to the page. 103 00:08:15,840 --> 00:08:25,410 Making the Thach request, I'll update the content of output tax content and we'll set that to loading. 104 00:08:30,180 --> 00:08:35,220 So right now, it's it's just loading until we're ready to update and clear out the content. 105 00:08:38,710 --> 00:08:47,740 And updating it so this will clear the entire HTML of the element, so once we get the data, it's ready 106 00:08:47,740 --> 00:08:50,730 to add to the page, we can clear out the content. 107 00:08:51,190 --> 00:08:56,590 So within the make list item, we're passing through the element information as item. 108 00:08:57,460 --> 00:09:02,470 And the structure is going to be within this object structure where we've got the name, the status 109 00:09:02,470 --> 00:09:03,480 and guests. 110 00:09:03,910 --> 00:09:11,590 So let's as we construct these, let's set up a few elements so we can have a mean div container. 111 00:09:11,810 --> 00:09:18,070 And this is going to be using the document, create elements or creating an element on the fly. 112 00:09:18,100 --> 00:09:20,500 So this right now is just going to be a blank div. 113 00:09:20,800 --> 00:09:31,810 And then within this div, let's go ahead and add the inner HTML for the div and set that up to be using 114 00:09:31,810 --> 00:09:32,630 the template literal. 115 00:09:32,650 --> 00:09:36,630 So those are the back text to the left of the one key on your keyboard. 116 00:09:37,570 --> 00:09:44,800 So as we loop through we've got the item information and item name. 117 00:09:46,480 --> 00:09:53,740 And what we also need to do is we need to take output and append the newly created element that we created. 118 00:09:54,130 --> 00:09:56,800 So that will list out all of the names on the screen. 119 00:09:56,810 --> 00:09:58,870 So I see it there on the right hand side. 120 00:09:58,870 --> 00:10:03,250 So we've got the four names and that's consistent with what we have within the adjacent file. 121 00:10:03,490 --> 00:10:06,760 And the nice thing about JSON is it's fully dynamic. 122 00:10:06,770 --> 00:10:13,150 So if you make any updates to the list, you're going to see that that also updates to the JavaScript. 123 00:10:13,330 --> 00:10:19,900 So it's just taking the data and the JSON data and constructing the visual for the user with that. 124 00:10:20,980 --> 00:10:27,040 So we can also add in no guests. 125 00:10:27,190 --> 00:10:31,260 And let's add in the guest value here. 126 00:10:32,350 --> 00:10:42,790 So item and this one object was property name was guests, and I believe it was actually plural guests. 127 00:10:43,090 --> 00:10:46,690 So you have to also be careful that you get the property name correctly. 128 00:10:46,990 --> 00:10:52,090 So we've got the number of guests and actually I'll remove the word guests. 129 00:10:52,090 --> 00:10:53,680 So we just have the number there. 130 00:10:54,070 --> 00:11:01,600 And then also depending on if whatever this boolean value is for status, we can update and add in a 131 00:11:01,600 --> 00:11:02,620 class to it. 132 00:11:02,980 --> 00:11:07,960 So let's create the class within the style of the page. 133 00:11:13,610 --> 00:11:16,940 And give it a property name of active. 134 00:11:21,430 --> 00:11:27,940 And the background color to red for now, and of course, we can update this as needed so as we loop 135 00:11:27,940 --> 00:11:29,200 through the list. 136 00:11:33,420 --> 00:11:44,700 Take the d'Hiv class list and add the class of active, so that will turn them all red and we can also 137 00:11:44,700 --> 00:11:48,870 have a condition here that checks the item status. 138 00:11:49,050 --> 00:11:54,600 And depending on what the item status is, it will either set it to active or it won't add anything. 139 00:11:56,640 --> 00:12:05,310 So now only the two items that we have with the boolean value of true are going to be red if we update 140 00:12:05,310 --> 00:12:10,340 the data that will now turn whatever other one that we have to read. 141 00:12:11,250 --> 00:12:13,800 Let's also do the text decoration. 142 00:12:14,850 --> 00:12:24,360 And I've said that to underline and I'll set the color to be read, so that way it's turning them red, 143 00:12:24,360 --> 00:12:27,150 if they're actually that should be if it's. 144 00:12:31,230 --> 00:12:33,480 And if it's not active. 145 00:12:37,240 --> 00:12:39,280 Or maybe this should actually be confirmed. 146 00:12:43,400 --> 00:12:51,740 So let's change the name to confirmed, not confirmed, and if they're not confirmed, then they're 147 00:12:51,740 --> 00:12:53,960 going to be having a color of red. 148 00:12:57,450 --> 00:13:05,940 So now all you have to do is update the JSON data and it's going to update the content that's being 149 00:13:05,940 --> 00:13:08,100 output to the user accordingly. 150 00:13:08,940 --> 00:13:18,990 So just set this to this class list and we're going to add the other one. 151 00:13:19,000 --> 00:13:20,300 So the not confirmed. 152 00:13:22,950 --> 00:13:25,800 So the ones that have been confirmed are going to be green. 153 00:13:26,010 --> 00:13:28,740 The ones that have not been confirmed are going to be red. 154 00:13:29,340 --> 00:13:35,460 So coming up next, we're going to make the list and make it interactive so that we can toggle the classes 155 00:13:35,880 --> 00:13:39,720 and also that we can save the JSON data. 156 00:13:39,720 --> 00:13:46,700 We can add to the list and we can save the JSON data dynamically into the local storage of the Web browser. 157 00:13:47,280 --> 00:13:49,620 So that's all still to come in the upcoming lesson. 158 00:13:50,430 --> 00:13:57,930 So go ahead and create your own version of the list and also make sure you get an opportunity to practice 159 00:13:57,930 --> 00:14:06,420 constructing the JSON content and then make some updates to the JSON content and see how it responds 160 00:14:06,750 --> 00:14:10,050 within the list on the screen, within the Web browser. 161 00:14:11,990 --> 00:14:19,100 Before the next lesson set up, Jason file with data using fetch connect to the Jason had data and then 162 00:14:19,100 --> 00:14:22,700 output that data onto your webpage with JavaScript. 163 00:14:22,880 --> 00:14:28,970 So once you've made a connection to your JSON file, pass through it and output it onto the page, create 164 00:14:28,970 --> 00:14:35,300 the elements and the page elements dynamically with JavaScript and using the source data from the Jason 165 00:14:35,310 --> 00:14:35,630 file. 166 00:14:36,710 --> 00:14:38,930 And you could be ready to move on to the next lesson. 167 00:14:39,170 --> 00:14:40,490 We're going to make this interactive.