Viewers: in countries Watching now:
Often, designers need to convey simple data without the overhead of a relational database such as MySQL. This course introduces web technologies that make it easy for a designer or developer to store, retrieve, and display data online.
So, $ sign, document in parenthesis followed by .ready? And another set of parentheses, which contains function, parentheses. Now, after the parentheses following function, but before the final parentheses on that line, we want to put a pair of curly braces and then open it up so we can put our code inside there. Now, I'm going to go ahead and put my closing semicolon down at the bottom of the document-ready function. So, that's already taken care of.
As I mentioned, there's currently no way direct way to straightforwardly read in a YAML file with the .ajax method of jQuery. So, we're just going to load the file directly in using a YAML.js function, which is called YAML.load. So, I'll create a variable, var I'll call this yamlFile equals YAML all upper case, load and then parenthesis, what is it we want to load. We have a data file called data.yaml.
If you've already done that work, feel free to copy and paste the code and make the single change necessary to get it to work. Of course, I'm still going to go through the code for YAML bit by bit starting with the each function itself. So, let's begin that $.each. Parenthesis. There are basically two arguments here, the first argument points to the portion of the yamlFile to loop through, which are the painting objects. So, to target that, we'll put in our variable, yamlFile and then the first element within that that we want to look at, which is the overall grouping of paintings.
the specific group that we want to look at painting. And if you have copied in that code that I mentioned from chapter 4, this is the one area that you need to change. Okay. After we've identified what it is that we want to do. Let's enter in our function call. And then in the parentheses it takes two arguments, one for keys, we'll give that a k. And one for values, v. And then after the kv, I'll put in a curly brace pair and again close it up with my semicolon.
Okay. Now, we really only need the values here, so we're going to set up three variables that access them. First is the title variable. And we'll look for v.title. Next is the image. And I'm just going to call this img and v.image will get us that information. And then price. Var price equals v price. Next, comes the append function, which integrates the HTML and data, we'll step through that very carefully.
Alright. So, lets start it off with a $ sign, identifying where we want this code to go, and we want it to go into that div that I showed you earlier with the id of container. And we're going to append some code to that. So .append. Open up a pair of parentheses and a set of single quotes. Within this first single quote is going to be a div with a class of painting and the beginning of our image tag. We'll start out with div, give it a class equal to and use double quotes here because we are within single quotes.
Now, after that closing double quote, close off the div tag and we're ready to start our image tag. So, bracket img and the first parameter is source. And again, we'll start that with our double quotes. Now, we're going to insert one of our variables right after we give the initial path. So, I don't need this closing double quote here, so I'm going to go ahead and erase that and, type in the path to where our images are stored.
And you'll be very surprised to hear that they're in a folder called Images. Now, let's go after the single quotes so that first part of HTML is done and we're ready to concatenate our variable, which is image. And another $ sign to go back to HTML so we'll start up again with single quotes and we need to close off that double quote so I'll enter it in. My code editor likes to put in pairs of double quotes, so I'm going to need to remove that second one.
And now we've got a couple more image parameters to enter, so the first is width and we'll set that to 200. The next one is height. And that is set to 225. You'll notice I'm having to remove the second of my double quotes every other time. It's just something to keep me on my toes here. So next up, we'll put in an attribute alt, so we have some alt text here. And the all text that we want to bring in, we're going to pull in dynamically from our YAML file, and this will be the title again.
So, open it up with a double quote, and now we're ready to move past the single quote, and concatenate in our title. And now back to HTML. Again, we're going to close off that double quote. Only one, thank you. And now, we're ready to finish up the image tag and we'll do that with a forward slash and a car/g. Okay. Right after the image is in, we'll use a linebreak br tag.
And then put the title in its own div with a class of titles. So, little more HTML to go here. br/ to close off our line break tag, and now let's create that div with the class equal to title. And after you close off the div with the class of title, that's the end of that little string of HTML and we'll just concatenate in title one more time so you can reuse your data as needed.
And now let's head back to a little bit of HTML. Another line break. And we're going to put in the price now. Now, the price, if we take a look at the data, you'll see that the price just has numbers here. So, since what we're dealing with dollars, we'll add in a $ sign. And that's the end of that little HTML string. So, let's concatenate in price plus price plus and here's our final bit of HTML closing off a couple of divs.
So, the first one will take care of the title div and then the second one will finish off the painting div. Alright. Our code is now complete let's save the file. And then go check it out in the browser. Let me refresh the page to load in our YAML data, and there it is! Should have four paintings, one two three four, each with their own title, each with the price. Nice! While YAML's integration into jQuery is not quite as robust as that of XML or JSON, its popularity is really growing.
And that might change in future updates to the framework.
There are currently no FAQs about Working with Data on the Web.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.