In this lesson, we're going to start creating the list project and the project that we're working on
is going to be a list coming from JSON data and it's going to output the contents of the JSON data onto
the page within the Web page and give us the opportunity to interact with it with JavaScript.
And as we're connecting to the data, it's got some property names and values here.
So we've got a name for the user and guests and also the status.
So depending on what the status is, we're going to add a different class to it.
So it's going to be read if it's false and green with an underlying if it's true.
So you can go ahead and create your own version of this project, making use of the JSON data.
So let's create our list project that we're going to be doing in this lesson.
I've created a new app for DOT files.
We've already linked to that.
And this is the app for G.S. File where we can create the JSON data and then output that onto the page.
And we're also going to make an interactive list within this lesson.
So let's create a new file and within the new file, create and save this as JSON list so we can just
call it list JSON.
And this is going to be sitting within the same directory as the index app for James and List JSON.
So within here, let's create our first list.
So creating an array and within the array let's structure a few objects.
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
to loop through and iterate through.
So the first one is going to be John and then the second one is going to be the number of guests that
John is bringing.
So this is going to be no value.
So let's put it in four or five.
And then lastly, let's do a boolean value for status.
So whether they've confirmed or not that they are coming so false and we'll keep this structure for
all of the items within this list so that we can easily loop through it.
And that's one of the most important things when you are constructing your JSON data and your JSON object
to make sure that the structure of the list is going to be consistent and that you can easily iterate
through the content.
So next up, let's add in some more people and you can copy and paste and use the first structure as
the template and then just update the values that you want to use for the name, for the guests.
And also, we'll just keep that one a false comma separated out.
And as you're constructing this JSON object, you can add in as many names and as many of these objects
as you want.
And let's do one more here and we'll keep this one at true, so that one's true and confirmed.
So now we've got our JSON object.
And next up, we want to bring this into the JavaScript.
So making a selection with our JavaScript.
So we already do have a few places where we can output some content and then we can also as the DOM
content loads that we can make use of the output element and populate some data.
So using the document and query selector, selecting the element with a class of output and if you console
log, it's your selection of the element.
It should log that element into the console and you should be able to hover over it and highlight it
on the page.
Also, let's add in some content so you can do text content and add some content.
And just to make sure that everything is working, so this is where we're going to output the list contents
on the page and we need to connect to the JSON data.
So there is a function within JavaScript that you can listen for the DOM content loaded.
So this is an event that you can set to trigger.
And once the event triggers, then we know that the DOM content has loaded and we're ready to interact
with the Web page content.
So set up a window and add an event.
Listener event that we're listening for is going to be the DOM content loaded event.
So this is an event that fires when the initial HTML document has been completely loaded and passed
without waiting for stylesheets.
Images subframe to finish loading.
So basically, if you are familiar with Jacoway, this is the same thing as document ready.
And it just indicates that the browser has finished loading all of the page elements and that allows
the JavaScript to know that we're ready to start interacting with the content.
They have an example here, window at event listener and that that it's listening for is the DOM content
loaded.
So whenever it fires off, then it's going to run this code so we can also copy and paste it and then
just make sure that it is working.
I'm also going to update the view to the have the word wrap so that we can see the page content.
And now whenever we see that, we see that Dom fully loaded and parsed.
So that means that we've got the DOM content is loaded and ready to go.
So at this point we can make our fach request and making the first request to get the content that we
want to load onto the page.
So creating the list structure and the interaction for the user.
And we're going to make a connection to the list dot JSON file so we can use the format that we saw
in the last lesson where we're making the Thach request with Jason to the JSON file.
So fetch and fetching to whatever the you are Ellas.
And I usually do like to keep the Eurail dynamic so that we'll keep it and make it easy if we do need
to update it.
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
have data that I can update an adjacent file, then I can just update this Web URL.
I'll show you how to do that as well.
So setting it up as you URL and listening for the promise and then when it does get the response, doing
a return on the response object and returning it as Jason.
So using the built in method to return the content as JSON and then the next promise is going to be
where we get the data back.
And once we get the data back, you can also wrap it within another bracket if you want.
So depending on how you want to output the content.
So loading and getting the data out and.
Just fix up the brackets there, so once we have the data, first off, let's just make sure that we
did get the data.
So log it out into the console and the way that it gets logged out.
So this data value variable is going to be an array.
And so we've got an A length.
And with arrays, we know that it's really easy to loop through the arrays.
So let's loop through the data object and using for each well, loop through the the array returning
back to element.
And we'll consul logout each one of the elements on the page, so that breaks apart each one of the
items that is contained within the JSON file.
So doing it this way makes it really easy to work with the content now in order to add it to the page.
Going to create a separate function that's going to handle that.
So let's set up a function and I'll just make the list.
It's actually going to be making the list item and give it an attribute and argument name of item and
I'll move up the code.
So the idea is that as we loop through each one of these objects, we're going to construct each one
of those items and add them to the page.
Making the Thach request, I'll update the content of output tax content and we'll set that to loading.
So right now, it's it's just loading until we're ready to update and clear out the content.
And updating it so this will clear the entire HTML of the element, so once we get the data, it's ready
to add to the page, we can clear out the content.
So within the make list item, we're passing through the element information as item.
And the structure is going to be within this object structure where we've got the name, the status
and guests.
So let's as we construct these, let's set up a few elements so we can have a mean div container.
And this is going to be using the document, create elements or creating an element on the fly.
So this right now is just going to be a blank div.
And then within this div, let's go ahead and add the inner HTML for the div and set that up to be using
the template literal.
So those are the back text to the left of the one key on your keyboard.
So as we loop through we've got the item information and item name.
And what we also need to do is we need to take output and append the newly created element that we created.
So that will list out all of the names on the screen.
So I see it there on the right hand side.
So we've got the four names and that's consistent with what we have within the adjacent file.
And the nice thing about JSON is it's fully dynamic.
So if you make any updates to the list, you're going to see that that also updates to the JavaScript.
So it's just taking the data and the JSON data and constructing the visual for the user with that.
So we can also add in no guests.
And let's add in the guest value here.
So item and this one object was property name was guests, and I believe it was actually plural guests.
So you have to also be careful that you get the property name correctly.
So we've got the number of guests and actually I'll remove the word guests.
So we just have the number there.
And then also depending on if whatever this boolean value is for status, we can update and add in a
class to it.
So let's create the class within the style of the page.
And give it a property name of active.
And the background color to red for now, and of course, we can update this as needed so as we loop
through the list.
Take the d'Hiv class list and add the class of active, so that will turn them all red and we can also
have a condition here that checks the item status.
And depending on what the item status is, it will either set it to active or it won't add anything.
So now only the two items that we have with the boolean value of true are going to be red if we update
the data that will now turn whatever other one that we have to read.
Let's also do the text decoration.
And I've said that to underline and I'll set the color to be read, so that way it's turning them red,
if they're actually that should be if it's.
And if it's not active.
Or maybe this should actually be confirmed.
So let's change the name to confirmed, not confirmed, and if they're not confirmed, then they're
going to be having a color of red.
So now all you have to do is update the JSON data and it's going to update the content that's being
output to the user accordingly.
So just set this to this class list and we're going to add the other one.
So the not confirmed.
So the ones that have been confirmed are going to be green.
The ones that have not been confirmed are going to be red.
So coming up next, we're going to make the list and make it interactive so that we can toggle the classes
and also that we can save the JSON data.
We can add to the list and we can save the JSON data dynamically into the local storage of the Web browser.
So that's all still to come in the upcoming lesson.
So go ahead and create your own version of the list and also make sure you get an opportunity to practice
constructing the JSON content and then make some updates to the JSON content and see how it responds
within the list on the screen, within the Web browser.
Before the next lesson set up, Jason file with data using fetch connect to the Jason had data and then
output that data onto your webpage with JavaScript.
So once you've made a connection to your JSON file, pass through it and output it onto the page, create
the elements and the page elements dynamically with JavaScript and using the source data from the Jason
file.
And you could be ready to move on to the next lesson.
We're going to make this interactive.