Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,971 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Interacting with data through HTML forms
- Storing data as comma-separated values
- Saving, retrieving, and displaying data as XML
- Setting up and updating JSON data
- Creating a YAML data file
- Using HTML5 data storage solutions
Skill Level Intermediate
JSON is pretty popular nowadays, in version 1.1 of their API, Twitter switched to exclusive support for JSON. And all major social media platforms work with the format as well. So, just how do you bring in your own JSON data into your webpage? I'll show you all the steps necessary in this lesson. But before we get to coding, let's take a look at an example JSON data file. On the screen now, is data.json from the Chapter 4, 04, 02 folder of the exercise file.
So after that set of parentheses, put in an open and closed curly brace and press Return. Put a closing semicolon after the curly brace and parentheses you see below on line 19 and now we're ready to start adding in our code. Now we'll put in our first real function. This uses the primary AJAX method in JQuery to asynchronously load in our JSON file. The AJAX method takes a number of parameters. So we start that with $.ajax.
Followed by parentheses and curly brace, because we're doing a number of parameters, so type colon and then in quotes, get. Follow that with a comma, after every parameter, except for the last one. We'll need a comma. Next up is URL. This is the file name that we want. And this one is called data.json. Comma at the end. Next up, dataType with a capital T and no surprise, it's JSON.
And then on success, if it loads okay, we'll call the function jsonParser that we're going to write. Okay, let me finish up here with another semi colon and that code looks good to go. I'll scroll down a bit as we add more code here. Now we're going to define our function after the close of the document ready function, put in the keyword function. And the name of our function, jsonParser.
And within the parenthesis, we are passing the argument of JSON. Open a pair of curly braces, and the first thing we're going to do is, because this function would have been called if the JSON file was loaded successfully. We can go ahead and fade out our loading .gif. So dollar sign, parenthesis, single quotes. We'll target the div that holds the loading gif, that's called load.fadeout, all that with a pair of parenthesis and a semicolon.
And next we'll create our JQuery getJSON function. This takes two arguments. The name of the file and the function. So $.getJSON, all uppercase, followed by parenthesis, single quotes, the file we're going to get, data.JSON, function, parenthesis. And what we're going to work with, the data.
After the set of parentheses attached to the word function, put it in a curly brace, and hit Return. Let's go ahead and add our semicolon where necessary after the curly brace and the semicolon there. And I just noticed that I left one off up here. So let's go back and make sure we pick that up. Okay. Now we're ready to work on the heart of our function here, which is the each loop that works its way through the JSON data file. So we'll set up $.each, and open and close paren.
Now the arguments for the each function point to the portion of the JSON file to loop through which are the painting objects. So the way we target that is following down the tree data.paintings.painting. Follow that with a comma. Give our function keyword instead of parenthesis. Now the function has two arguments. One for keys which I'm going to call k and another for the values v.
And after that closing parenthesis, let's put in that familiar curly brace pair and we may as well go ahead and. Put in our semi-colon there after the each function to make sure that we got it all squared away. Now we only really need the values here because we're going to be bringing in the value information and incorporating it into some HTML. So let's set up three different variables to handle those. Var title is going to be equal to v.title. Var image, or img, will be equal to v.image and var price is equal to v.price.
So just so you really understand where we're pulling the data from. Let's just go back to the data.JSON file for a moment. And really what we're looking for are the values that correspond to each of the keys that we see here. So if I look at this, the first one is V title, so the value for our title will be initially boardwalk five. And as it loops through, it will then pick up A Lasting Piece, Surfing High Tide, etc.
Likewise, the image will get the file name here and the price will pull it from the price key. Okay, let's head back to our coding. Next comes the append function which integrates the HTML and data. Let's tiptoe through that because it's a little bit of a piece of work. So, dollar sign parenthesis, single quotes. What are we going to append it to that will be the container and then the function word append followed by a open and close parenthesis.
And a open and close single quotes. Now we are ready to start with our HTML and the first part will be a div to hold the painting, and we'll make sure that has a class of painting. So div, class equals and with your attributes, within the single quotes, you need to use double quotes. So there's our double quote pair, painting and then after that closing double quotes, we'll close off the div tag. Okay that starts off our HTML.
Next, we want to put an image there. So, I'll open an HTML tag, image and then put in our source attribute. Again, we're going to start with a double quote, and Aptana likes to put in pairs of double quotes. So I want to get ride of that one because we'll use that a little bit later, but not quite yet. So now I'll start of my path which is the folder name images followed by a backslash. And now, we're ready to drop in the source that we pull from the JSON data. So we can close off that first bit of the string there with a single quote. Now we add in +.
Now let's start off with a space and add in our other attributes. The first of which is width, and that's going to be equal to in double quotes 200, followed by space height equal to, in quotes, 225. I have to be vigilant because Aptana loves to put in these double quotes, but it doesn't do it quite every time, because it's matching pairs. So, this time we're okay. Now, we've come to the alt attribute and what I want to do is pull in the title for that old attribute.
So we'll concatenate the variable title, and now we're ready to go back to our HTML. So single quote and a closing double quote followed by the closing of the image tag, forward slash caret. Okay, now we are using a line break, put in a br tab,. and we have another div. This one has a class equal to title, and then close that div tag. And now we're going to put in the title.
So plus, our variable title, plus again, single quote, one more br tag. And now we want to drop in the price, so we're going to put in a dollar sign here and again that ends our little bit of HTML. Pretty minor this time around. And then plus our price. Plus again to finish up the concatenation. And now all we need to do is close off a couple of divs.
So I'll start off with a single quote, slash div, close that div and close another div. Okay JQuery code is done. Let's save the page and try it out. Here's my page and because we don't have the JSON data pulled in yet, the loading gif is running continuously. So let me hit refresh and there's our paintings. Each with the title underneath it and the price. Not too bad right? Of course you can use this same routine to bring in any of your own particular JSON data.
In the next lesson, I'll show you how to take data from an HTML form and store it in a JSON format.