So here we're going to take a look at how we can understand and access the data in our page. The data we're going to need is in this js folder and it's called data.json. And you can see that it has a calendar right here as well as a list of artists with some bios and other information like a name. So we can take a look at that data a little bit easier using a really nice online tool. This is called the JSON Editor Online, and I'm going to just paste this data right here and then click on this arrow, and you can see that it allows you to visualize the data a little bit easier.
So this is how you write JSON on the left, and this is sort of the data structure on the right. So you can see that JSON is just sort of a text file. Every sort of key is in quotations, and then the data can be anything from just simple text, also in quotations, as well as more complex data. For example, this calendar is an array. That's why we have this bracket right here. And inside that array we have a series of sort of objects. So each one of these objects, in the case of the calendar, has information about the date.
So I'm going to inject the information from the data file inside this div. Now, to do that, I'm going to need to open this script.js file. Remember we're translating ES6, so we're using the js file in this process folder. So let's go ahead and get started by creating some variables. So we've got this data variable. I'm going to add something called DOMNode, and this variable is going to target our artist list.
So remember in the index.html file, I actually have a div with a class of artists, so in here I'm going to change DOMNode to be equal to document.querySelector, and I want to choose the item with a class of artists. Right, we do that before we make our AJAX request, and we want to actually start working on that once the request is successful.
So right here I'm going to delete this login to the console and I'm going to do most of my work right here. So what I want to do is access the information just about the artists. So if you remember reading this data.json file, we have this sort of object with two elements, the calendar and then the list of artists. So these are sort of two different fields within that JSON object, and we're interested in this artists piece right here.
So we will do a for loop and do this. Actually, we want a for in loop, so I'm going to choose it right here. I'm using Visual Studio Code, and it gives you a little bit of sort of a quick way of typing everything in. So our key, I'm going to call it item, and then object needs to be the piece of data that I want from my JSON file. So the data that we want is not just the entire data, but we want the piece that has the artists' information.
So we need to say for each item, which will be a temporary variable, in data.artists, because we don't want the entire thing. We just want the second element. Right, and then we're going to put each of the different artists inside this element right here that we're creating a variable for. So the element variable is going to have the information for each of the artists.
And what we'll need to do then is actually create a DOM element. So we'll create a variable here and we'll call it listItem, and that is going to be a new DOM element, document.createElement, and we'll create a div, because we want each of sort of the artists' information to be in a separate div. I want to make this a little bit bigger.
And we'll take each one of those list items, we'll modify the class name. Not something you really have to do, but it's kind of nice to have each one of the different artists have a class name that you can modify with CSS. And we will give it a class name of artists, or artist. And then we can go ahead and use that listItem, and then we can use the innerHTML property of each one of those listItems and modify the HTML.
So I'm going to do an h4 here, and we're looking for data and then artists. So when you select each of the pieces of data, you refer to each artist, you know, by using this array. Actually, we could use this variable that we created here called element, right? And then ask for one of the properties.
So we'll close out the h4 here. And then we will add a paragraph and element.bio here. Close out our paragraph. And then we'll grab the DOMNode that we created and append this element that we just created in here, appendChild and then we will use listItem.
All right, so let's check out our application. So you can see that now all these different names are being displayed in our page, and everything's coming in from our data just fine. So just with a few lines of code here, we were able to create our own element, a div, we changed the class name of each of those div items to artist, so actually if you were to inspect these elements, you would notice that each one of these divs has a class of artist, and inside we have an h4 with the name of the artist, as well as a paragraph.
It's a course that dives into the detail of how a JSON works and goes a little bit deeper into how to write it, how to read it, and how to parse it. If you have some ideas for this weekly series, and maybe you want to share with me some questions you've been asked or have asked in interviews, connect with me in LinkedIn or just about any other social media network like Twitter or GitHub @planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.