What do you want to learn? Leverged jhuang@tampa.cgsinc.com Skip to main content Pluralsight uses cookies.Learn more about your privacy Hands-on JavaScript Project: JSON by Paul Cheney Learn to leverage the power of AJAX to access and display JSON data from your local server, as well as from an external site using an API. You'll also learn how to create JSON files. Resume CourseBookmarkAdd to Channel Table of contents Description Transcript Exercise files Discussion Recommended Course Overview Course Overview Hello. My name is Paul Cheney. Let me tell you about this great hands-on JSON course. I believe that the best learning comes when you and I work together to build projects that you might see in the real world. In this Pluralsight course, we will be learning about creating and accessing JSON data using JavaScript. Most of you will recognize this process as Asynchronous JavaScript and XML, or AJAX. We will create JSON files within a JavaScript file, we will load them from a file on our local host using an XML HTTP request, and finally, load them from the Weather Underground site using an API. You will complete this course with a working example of a hospitality page where the data is dynamically loaded using ajax, as well as a weather application where the current weather conditions are displayed for any ZIP Code. Now you may not need either of these functioning, responsive pages for your next client, but you can use what you learn to build your next JSON and AJAX project. Introduction Overview Hello and welcome to another hands-on project from Paul Cheney. In this course, we're going to take a good, hard look at JSON data. After the introduction, we will explore creating JSON data as part of a JS file. Next, we will use XML HTTP request to import data from an external JSON file. You may know this as AJAX. Then we will explore how to structure JSON data to include arrays. Finally, we will assemble everything we've learned to build a weather site application that is mobile friendly. JSON stands for JavaScript Object Notation. It is used for exchanging data between a browser and a server. JSON data can be converted from a string to an object and from an object back to a string. Data transfer to and from a server should be a string. JSON data is formatted using name-value pairs. The name and value are joined using a colon. Each pair is separated by a comma. The entire thing is wrapped in curly braces. JSON data can be much more complex than this, but here you have the basic building block. We will cover this more in modules 2 and 4. Now let's take a look at the final project for this course. For the final project, we're going to reach out and grab JSON data from the Weather Underground site. We're then going to parse and use that weather information to populate our website. We'll provide a ZIP Code, and the JSON data returned will tell us our location, the current temperature, the weather description, and details about the weather forecast. This is what our completed site will look like on a smartphone. Although this is not a course on responsive and mobile-first design, we will practice good design by following these principles. Here's the same site on a tablet. And of course, you just saw this site on a desktop browser. Now, let's get started. Exploring JSON Overview In this module, we will demonstrate how to create and access JSON data. First, we will convert a string to an object and then an object back to a string. Next, we'll build a single-level JSON object and then build a two-level-deep object, and finally, a three-level object. In each of these, we'll also practice displaying the data. When we get data from a server, it comes as a string, and we use parse to convert it to a JSON object. Likewise, when we're trying to send JSON data through a URL, we must first convert the object to a string using stringify. Now let's switch gears and talk about structuring JSON. Here's the basic building block of JSON. To this, I will ads name- value pairs, and it will look like this when we actually add words. However, for now, we're going to leave them out to keep this example simple. Any value can be replaced by another series of data to make it two levels deep. Let's remove the double quotes from the second value and spread it apart. Now we can add another set of curly braces with name-value pairs in that space. We could do it again by taking out another value, spreading it apart, and dropping in yet another set of curly braces. Now we have one that is three levels deep. Although I have used three name-value pairs in each example, there's really no limit to how many you can use in the real world. Yeah, this stuff can get pretty complex. Let's try it out in an editor. Roundtrip JSON I have a copy of the start.JS ZIP file, which I've decompressed, and today I'm going to be using Brackets as my editor. I take a copy of the start.JS, I drag it over here to the left, and you can see that it has a CSS folder with an empty styles sheet, an HTML index page which is pretty much empty, and then a main.js, which is linked in. Let's start by creating a blank JSON container. Remember it starts and ends with curly braces, and then we have name- value pairs, so I'll do "":"". There's the first pair. Then we separate it with a comma. We'll go ahead and add a second pair, "":"". For now, that's good enough. Let's come back and put a name in here, we'll call it favColor, and my favorite color might be orange. We'll do our second name, in this case, favSeason, and our favorite season today is going to be fall. So now we have a completed JSON data structure, but we need to assign it to a variable. Let's create a new variable, and we'll just call it start. And we'll set it equal to, now this is a string, so we're going to have to put it inside of single quotes, so wrap the entire thing, and then end it with a semicolon. So now we've taken this, we've put it inside of quotes which makes it a string, and we've assigned it to the value start. And we'll create a new variable called myObject, and we'll set it equal to JSON.parse, and we will parse the variable start. Now to check our work, we'll then do a console.log, and we'll set myObject and run it out. Let's open our index file. I'm going to use one of the cooler features of Brackets called Live Preview. Live Preview allows you to edit CSS, HTML, and JavaScript, and then see the updates in real time on your browser. It is activated by clicking on this lightening bolt. I'll then inspect, switch to Console, and I can see that I have an object displayed out here. And if I open it, it has a favorite color and a favorite season. And you can see that it is an object with name-value pairs, in this case, two of them. Now let's go back to our JavaScript. Let's take that object and turn it back into a string, so var myString is going to equal JSON.stringify, and in here, we'll put myObject. And once again, we'll test the results by doing console.log myString. Save it. The Live Preview automatically updates it. We can see here at the beginning, the object, which is the result of parse, and below it the results of stringify. You can take myString and you can convert it back into an object. So we'll take myString here, convert it back into an object, and now we can see we've gone from an object, to a string, back to an object. Single Level JSON Data Now that you're able to convert from a string to an object and back, let's create another one called theData1, and we'll assign it as string with a name-value pair for first, another name-value pair for last, and another name-value pair for city. We want to then create a new variable called myObj, and we'll set it equal to JSON.parse, and we'll throw the data in there, and we'll take that and display it to the console just to test our work with myObj. Save it, come over here, we can see that our name-value for first, last, and city is all in place and working correctly. Now back in my index page, I have a paragraph that's currently empty, but it has an ID of message. So we're going to use that and display the contents of our JSON object into that. Let's come over here and we'll do document.getElementById. In this case it's message, and then we'll set the .innerHTML = myObj, and then you can use any of the names from the JSON object, which is first, last, or city, so let's try last. We'll save it. There's Cheney. If we add city, and then the city appears in that paragraph. Double Level JSON Data Here we're going to have an example once again, two name-value pairs. In this case we've got Jane and Jim. Let's first of all create a variable called myObj. Once again we'll set it to JSON.parse, and this time it's theData2, and then we'll display this, console.log as myObj. Save it, and there we go. Now we're going to take this value of tall, wipe it out, and provide some other characteristics about Jane. So remember the base. Let's come down here just to keep our code clean. Open closing curlies, name:value, name:value. And you don't put a comma after the last one or you'll break it. So let's copy that, and where those two quotes were, we're going to paste it. Do the same thing with Jim and chubby, delete the value and paste the combination. Now, what do we want to know about Jane? Well, maybe Jane has an age, and she's 29 forever, and maybe she has a degree from college that's an MFA. Jim over here also has an age. He admits he's 49, and he has a degree, and it's a master's. Delete this placeholder down here, save it, there's our object. Notice it has sub-objects in it because now we're at two levels deep. So how do we access these? Well, it sort of gives you a hint. If you mouse over age, you'll see .Jane.age or .Jane.degree. Document.getElementById, and we have message as an ID on the screen, and we'll set the .innerHTML = myObj.Jim.age. Let's see if that works, and sure enough, there's 49. And we could change this to Jane and get her age as 29 forever. So if you have very complex data, which we will look at in the last unit, you'll be able to open these things up, and by simply mousing over them, the console in Chrome will tell you what you need to do using .notation to display that particular value. Triple Level JSON Data Let's now take this one step further. So once again, I'll come down here, I'll do my curly braces, "":"", "":"". Jane happened to get more than one degree. In here, we're going to replace the MFA single value with multiple degrees that Jane has earned and where she got them. So she got her AAS degree from Virginia Military Institute, and she got her bachelor's degree from University of Virginia. We'll now take this, copy it, delete the MFA with its quotes, and replace it with that JSON information. Save it, hit refresh, open up the object. There's Jane, there's her degree, and there's the sub-sub-information. Once again, by mousing over the AAS or the BA, we get the full path to that piece of data, so .Jane.degree.BA. So we'll go .Jane.degree.BA. Save it. And it looks like UVA was extracted from this degree information. There's one thing you need to watch out for when you're creating your data, and that's that it must be all on a single, continuous line. Now it's going to make a lot more sense if we were to break this up and put some hard returns in here so that we could see where stuff starts and stops. That'd be great if we could do that. But as soon as we save it, you can see we're going to get an invalid or unexpected token error because the hard returns in our JavaScript file mess it up. So we must leave this on a single line inside the JavaScript file. Now when we start doing this as an external file, that rule does not apply. In this module, we converted a string to an object and then back again; then we built a single, a double, and a triple-deep JSON data; and accessed it using .notation. In the next module, we'll practice using the XML HTTP Request object. Loading External JSON Data Overview I'm glad you're still with me because we're going to load an external JSON file using AJAX. Let's start by looking back at how static and dynamic content is loaded, then we'll talk about how AJAX has changed things. Next, we'll dissect an AJAX request, and then finally, we will practice loading data using a text editor. In the early days of the internet, content was stored on a server as static pages. A browser would request a page from the server, and that page would be returned. If something on the page needed to be dynamic, then we could use a server-side language such as PHP and maybe a database like MySQL. The browser would then send the request to the server for a page. PHP would instantly build the page using resources from the server and a database. Once the page was built, it would be sent to your web browser. This required that the entire page be reloaded. Modern browsers have a powerful JavaScript engine built into them, which allows access to cloud-based APIs. So now instead of reloading the entire page, we can interact with these services asynchronously. This technology is called Asynchronous JavaScript and XML. You probably know it as AJAX. Today, however, JSON data is preferred over XML data. AJAX can update a part of your page dynamically without reloading the entire page. The heart of AJAX technology is the XML HTTP Request object, which is built into all modern browsers. This object has the following methods and properties. We will demonstrate many of them in this module. To use XML HTTP Request object, we first create an instance of it using any variable name we want. In this case, I have used the variable myReq, which stands for my request. Next, we provide three values to the open method. Now the open method doesn't really open anything; it just sets the stage. We need a method for retrieving the information, and we will use GET. We need a path to the information and whether or not to do it asynchronously. This should be true. Next, we use the send method, which actually starts the entire process rolling. In between these, we create a function that waits for the data to load successfully. Once the data comes in, we convert it from a string to an object and put that into a custom variable I called cup. Then just to see if everything works, I will preview the JSON object in the JavaScript console. Let's try it out. Exploring the XMLHttpRequest Readystate The demos for module 3 contain a data.json file, in addition to an HTML file and a JavaScript file, which we've worked with before. In order to use the XML HTTP Request object, we must be running on a live server. You can either upload your files to your server as your build them, or, in my case, I'm going to use Brackets, which has a live preview built into it. Here is the JSON data that comes with this particular file. There are three name-value pairs separated by commas. We have a first in quotes, colon, and then the value, George. We have last, which is the name, and Washington in quotes. Served is the name, and value is the dates. We're going to try and load this into our project using the XML HTTP Request, or AJAX. Let's switch to our main.js file, and let's create a new variable. Now this variable name can be anything you want. It could be cow. That's a really stupid variable name, so I'm not going to use it. But it is something that you, the author, make up. I'm going to use xhr, which is shorthand for XML HTTP Request. You see it used quite a bit. And it equals a new, in our case, XMLHTTPRequest, left parenthesis, right parenthesis, followed by a semicolon. Now that our object is created, we can use several methods and properties. Let's start by examining the open method. So we'll use our custom variable, xhr.open. It needs three values, each separated by a comma. The first one is how you're going to get the information. You can use GET, POST, and several others. We will use GET today. Have a comma. The second value is the path to the information inside of quotes, so our file is data.json, and the last value is whether to do it asynchronously or not. Since we are using AJAX, and the purpose of AJAX is to be asynchronous, we should use true. Now let's go to our next one, xhr.send. And remember, this one is the one that activates the open. Open doesn't really open it, and send doesn't really send it. Send activates it; open sets the parameters. Now if we ran this, it would go out and grab the file and stick it in memory somewhere. But in order for us to track what's going on, let's take a look a readyState and onreadystatechange. So let's create a function, xhr.onreadystatechange. So whenever it changes, we're going to fire this function. Well, inside the function, we're going to track the value of the readyState. So console.log, and inside of there, we will use xhr.readyState, then see what it does. Notice I'm getting 2, 3, and a 4. Well, the XMLHttpRequest.readyState has 0 through 4 defined. Zero means it hasn't been sent, 1, you can see, is opened, 2 means the headers have been received, 3 means it's loading, and this can take a few milliseconds depending on how large the file is, and a value of 4 means done or the operation is complete. And that's really the only one we're concerned with. If it works, it's a 4, we're great. The others just sort of happen along the way, and that's part of the process. So we can see in our case that we are getting a 2, a 3, and a 4, so the data is loading successfully. Now another thing we can track through the console is xhr.status. That's another property, and you can see here I have a 200. Well, 200 means successful, so that loading was successful, the transferring was successful, etc. Now let's intentionally break this. Let's come back to our file, and let's change the name of our data so that the path is now incorrect. Now when we load it, we can still see a 2, 3, and a 4, but we can see the error, or the status, is a 404 not found error. So that would help us to come back and debug our code and maybe change our path so that it was working correctly. Let's go ahead and fix that problem, and back to our browser, and hit refresh. Well, in addition to a 200, which is a totally worthless code, you also have one called statusText, which is slightly more useful. Let's see what that gives us. You can see here the statusText means OK, OK, OK, and if we come back here and we break our path, it says Not Found, which is a typical 404 error. Let's fix our path. We don't want to leave any errors hanging out there in the wind. So now you know the property of readyState, the property status, and the property of statusText. You also know onreadystatechange, which is triggered as a function every time a number changes from 0 to 1 to 2 to 3 to 4. Exploring the XMLHttpRequest Onload and Status Now that we've taken a look at some messages, let's actually load and present the information. So we'll do an xhr.onload. The onload function is fired if the readyState has a value of 4 because that means the data has been loaded correctly. We'll set that equal to a function. Let's start with var myStuff = JSON.parse. Now parse takes a string and turns it into an object, and we looked at that earlier. Well, what are we going to parse? Well, we're going to parse the xhr.responseText, which is a property. And then we want to see it, so we'll run it to the console. Cross your fingers and your toes. Let's hit refresh, and we can see here that the object, George Washington, and when he served, actually loaded and is displayed. At this point, you need to stop, pat yourself on the back, because you have successfully loaded a JSON object using AJAX. We looked at earlier what happens if the path is messed up. So this case, we're going to change the path so it's broken. We now have a 404 Not Found error, and, of course, on line 16, when we try and parse this thing, it's not working because the data never loaded correctly. Remember that the onload function fires when the readyState equals 4. So we really don't need to worry about that. But the status must be 200, or the file hasn't loaded correctly. So let's come down here and wrap this in an if statement. Well, the if statement is going to be a check of the status to see if it's 200. So xhr.status===200. Remember, if it's 404, that means the file's not found. If it's 200, it means it was found successfully. So then and only then will we parse the data and log it out. Let's save it. It's not found; there's no error in attempting to load it. But if we fix our path and do it again, we can see the object has been loaded because the status was actually 200, which means it was successful. There's one more safety valve that we're going to add to our project. ResponseType refers to how the information comes in. You can see that the default is a DOMString. We're going to ensure that happens by assigning the responseType equal to the text, which you can see here is the DOMString. So up here after we set the open, we will then set the xhr.responseType = text. Once again, this shouldn't change anything; it's simply insurance to make sure that it's coming in correctly. We save it, we come back here, we hit refresh, there should be no visible difference because everything is now working correctly. Now we've got a lot of extra lines of code on here that we've done just as an explanation for what has happened that are not really necessary. So let's restructure this bit of JavaScript code as you might typically see it in an application. This stuff here, onreadystatechange, is not necessary. Typically, the send, which is the thing that triggers the whole thing, is actually at the end. So first of all, you create a new object, you set the open status, you ensure it's coming in as text, then you create a function which just sits there and waits for the onload to be triggered when the readyState equals 4. And then down here, you actually fire the whole thing off. Inside of here, we have that safety valve, which makes sure that it was found because it's now a 200, and then and only then, do we parse it and log it. When it comes in, we can see our object, first, last, served, as a JSON object. In this module, we reviewed static and dynamic pages and how a modern JavaScript engine allows us to use AJAX and the XML HTTP Request object to update page content without reloading the entire page. Finally, we practiced loading an external JSON file in a text editor. In the next module, we will look at including arrays inside JSON data. Structuring JSON Data Overview So far, we have played around with basic JSON data, and now we're going to go deeper by adding arrays. In this module, we will look at three examples of how to include arrays in JSON data. Then we'll build and load an external JSON example for each one. Finally, we will put our JSON skills to use and build a JSON-driven hospitality web page. In our first example, we will put name-value pairs inside an array. Remember this basic building block for JSON data from module 2? Well, we're going to use it again. In our external JSON file, we will start with open and closing square brackets. Then we can add as many of these basic JSON building blocks as we want. They must be separated from each other using a comma. Remember not to add a comma after the last one, or it will break. In our second example, we will replace the value of a name-value pair with an array. First, we will delete the value and insert some space. Next, we will add square brackets, and then inside that, we can add basic JSON building blocks. Here's the same information presented vertically. We can easily add additional elements to an array. Remember to separate them with commas, and don't add a comma after the last one or it will break. In our last example, we will replace the value of a name-value pair with an array, remove the quotes, and add square brackets. In this case, we will add an array of values instead of name-value pairs. I promised at the beginning that we would build a weather app, and we will do that in the next module. However, at the end of this module, we will be practicing our JSON skills to build a hospitality page. All of the information for each room will come from a JSON object and be updated without reloading the page. So, let's get started. Create Array JSON Presidents The demos for module 4 contain 3 folders, a JSON4a, a JSON4b, and a JSON4c. Let's start by opening JSON4a inside of a text editor of your choice. I will be using Brackets as my text editor because it has a live preview. Over here on the left side, I have loaded JSON4a. The data.json file currently is completely empty. Yours will have some information in it. We'll start with an array. So we'll do open closing square brackets. And inside of that, we will put a series of parenthesis, "":"", so there's a name-value pair, comma, "":"", and let's do the last one. So here's the basic JSON building block. We're going to actually use three of those, and remember to separate them by commas. Do not put a comma right here. Then you could fill this in with whatever you wanted. In our case, your final data is going to look like this. We're going to list presidents of the United States and when they served. And now we're ready to open our JavaScript file. Load Array JSON for Presidents In our JSON data, we'll begin with a variable called xhr, and we'll set it equal to a new XMLHttpRequest. Then we will open it, and we're going to need three pieces of data. The first one is GET, the second one is the path, and the last one is true, which means load it asynchronously, which is the whole point of AJAX. To make sure everything is loading correctly, we will ensure the responseType is equal to text, and then we'll switch it to an object. Now that everything's set up, we can go ahead and issue the send, and because we're using GET on line 4, we don't need to put anything in here, semicolon. Now that's all going to happen in the background. Now we need to watch for the onload function. Well, first of all, we need to make sure that it was a successful load. If the xhr.status, equal to 200, which means it was successful, if it's successful, then we'll create a variable called myStuff, and we will assign it the JSON.parse of the xhr.responseText. And then to see what we're doing, we'll run that through the console. We can see here in our console that we have an object. It has elements 0, 1, and 2, which correspond to 0, 1, and 2. If we open object 1, we can see that it has 3 name-value pairs, a first, a last, and a served. And the others display the same way. So we have successfully loaded an array of JSON data with three different presidents. Let's track some of this information that we've just loaded. Let's first ask for myStuff, and because it's an array, we use array notation with brackets, and we can ask for 0, 1, or 2. If we ask for 1, it's going to give us the second president, which was John Adams. And if we were to ask for 0, of course, that should give us George Washington. Well, what if we add a .first? It should now give us the first name of the first element, which is George, and there it is. Of course, we could go last, and we get Washington. Remember, you can look at these in the console by mousing over any name, and it will show you exactly how to get it. It shows a 0.served or, in this case, a 1.served. So it's kind of helpful if you're trying to figure out complicated data to just mouse over and look at the path there, and them mimic that path right over here. Load Named JSON for Presidents Now let's move on to a more complex structure of JSON data. In your JSON4b example, this will already be filled out, but I want to show you how I got there. So we're going to start off with a standard name-value pair, "":"", and then we're going to do the second one. Inside this first one, we will put presidents, and inside the second one, we'll put vicepresidents. Now we're going to replace the values with arrays, so these two quotes go away, and they get replaced with square brackets. These two quotes go away and get replaced with square brackets. Then we'll open up some space here, and we'll open up some space here. In between these brackets, we put the standard, curly "":"", and we do this as many times as we want. Since we're going to be doing multiple presidents, we'll go ahead and put, say, three of those, separate them with commas, and then each president also had a vice president, so we'll have three of those. So keep that in mind, and let me show you the text that you'll be getting. This is what you'll see, already filled out. There's the presidents, here's the array of presidents, vice presidents, and the array of vice presidents. So now that our data's in place, let's go ahead and load it in our JavaScript file. Display Named JSON for Presidents Inside our main JavaScript file, the demos already has the following code in place. This is what we did in the last unit, and I'm not going to waste your time watching me retype it. But we do open it, we set the responseType, and we send it to activate the open. Once this status is at 200, which means successful, we load it into myStuff, and then we console.log myStuff. So let's come over here to our browser, hit refresh, there's the console log. You can see the presidents and vice presents are each an array of three items. There's items 1, 2, and 3, and 1, 2, and 3. Each of those objects contains the first, last, and served for the president and the vice president. So how do we access it? Well, let's start by creating a loop. We're going to start out by setting i equal to 0, and then we're going to count till i is less than myStuff.presidents. And we want the length of that, because it's an array, it has a length, and then we will count up by 1. While we're inside of there, we'll do a console.log, we'll ask for myStuff.presidents and a president number, which is going to increment, so we'll use our variable i, and we'll ask for their first name. Save it. And here we have George, John, and Thomas. Looks great. Well, we can also copy, paste, and this time, ask for their last names. Now I've got all presidents' first and last names, and of course, by simply changing this to served, we can get all of the information out as individual elements. Well, don't forget the vice presidents; they're important too. So here instead of presidents, if you come over to our object, you can see that it's simply vicepresidents, all lowercase, and it's still going to be i because there are three presidents and three vice presidents, so we can put it in the same loop. And we'll ask for their last name and their served. And there's everything in a list, except for we have an undefined. Why do we have undefined? Well, if we look at our data, we can see that we did not have a served name-value pair with the vice presidents, only with the presidents. So it's okay if your arrays are different sizes, as long as you take into account for that by not asking for something that isn't there. Save it. Now we've got a clean console log of all of the data. Well, we are not done yet. Up here in the actual page, there is nothing about the data that we've loaded, and that's our end goal. The console log is simply for us to figure out what's going on. So let's jump back to our index, and we can see here on line 13 there's a division with an id of message. We're going to put information into that division from our JSON object. So let's come back to our main JavaScript file, and when this for loop ends, let's create a new variable, and we'll just call it myString, and we'll set it equal to empty. And then underneath that, we'll do another loop through all of the information. So the for is going to be identical to that, and of course, the end will be identical as well. Inside of this for loop, we will add information to this string, and then at the end, drop it into the web page. Let's set up a new variable, x=i+1, so it's not 0 indexed, myString += "President 1 was";. So instead of a 1, we're going to use this variable x. So let's delete that, "++", and then we'll just drop in an x. So now it should say President 1, President 1, and President 3. Great, well, what else do we need to know? His name. So let's come down here, and we'll do myString += myStuff.presidents, and here, we're after the i, which is 0, which is actually George Washington, and we want his first name plus a space, so there's a space between his first name and his last name. And then we'll change this to last, and then when the loop is over, document.getElementById. If you remember the element's name was message, and we'll set its .innerHTML equal to myString. All right, let's see what we've got so far. President 1 was George Washington, good, President 2 was John Adams, President 3. So it's looping and it's throwing it in there, but it's not very pretty at this point. So after was we need a space, so we'll add a space there, and after the last name, let's put an HTML break tag. Now what've we got? So that looks a little bit more like information that can be consumed by a normal person looking at our website. Now let's add some more information about our beloved presidents. (Typing) So let's take a look at that data, and you can see it is in here, but it's a little bit messed up. Our break tag is now throwing us into a terrible mess. So let's remove it from here, and instead of trying to break it there, let's break it at the very beginning. So each new president will start off on a new line. Now I've got President 1, 2, 3. He served from-with, and we can see that we're missing the rest of this data. That information is exactly like line 28 and 29, except that instead of president, it's vicepresident. So that'll save us some time typing, and there it is, President 1, 2, and 3, he served from, with, and there's the vice president information. Load JSON Hospitality Data I've loaded JSON4c into my editor. I've opened the page, and you can see here that all of the CSS, all of the button, and all the HTML is in place for this template. We begin with three different buttons. Each of these buttons will load a different part of our JSON object. Once that part is loaded, it will be provided with a room name, a room description, a photograph, which is in our images folder over here. There's a cost for weekdays and a different cost for weekends, we'll look at that, and the amenities actually vary from room to room. In our JSON data, we have a combination of what we've done with the last two. We start out with an array. Each room is an array element, so it's 0, 1, and 2. Within each one, we have name-value pairs, so a name-value pair for the name of it, the description. The cost, you'll notice, is actually a combination of two name-value pairs, one for the weekend cost and one for the weekday cost. And in details, we actually have another array. This time, it's simply a comma-delimited list of the amenities for that particular room. And then, of course, there's a photo. It's a path to an image, which we'll load using JavaScript. Inside of our main JavaScript, I've already provided a lot of the code because we've done this before. We know how to open, we know how to set the responseType, and we know how to initialize it using send. We know how to wait for it to onload, to make sure it's correct using status === 200. We then parse the data and drop it into hotelInfo. We've then taken hotelInfo and dropped it into our log so that we can see it here as an object of 3 elements, 0, 1, and 2. The difference here is I've created a variable for hotelInfo, another variable for details. Those will be used in another function, which is triggered each time we click one of these buttons. So we click Southern Serenade; it's going to call the function we have yet to build. Display JSON for Hospitality Page Throughout this entire course, I've been telling you the benefits of using Brackets, but at this point, it's going to break down and not serve me as a local test environment. So now I'm forced to switch to actually FTPing all of my changes to a live server. I'm going to be switching from Brackets to Dreamweaver because I already have it set up with a sandbox. In Chrome you can see this sandbox is currently empty. This is where we'll put our live changes to our hotel page. So JSON4c, in my case I'll just be moving it to my local sandboxSRC folder. Then it appears here so I can edit these files. And this looks an awful lot like Brackets, and it works exactly the same. Our JSON data, there it is, and our JavaScript, which is where we're going to start. Inside of the main JavaScript on line 18, I'll start by creating a new function. Now the purpose of this function is going to be to display the JSON data to the web page, and we're going to be sending a value of 0, 1, or 2, depending on which hotel room we're looking at. So let's put a generic value of x in there, and then let's console.log the value of x. Next I'll push the entire contents of this folder to my remote sandbox. After all of the files have been FTPed and it hit refresh, I can now see the JSON4, and there is the website on a live server, and this is going to now work for us. So let's switch to the index. If we scroll down to line 27 through 29, we can see a button. It's already set up with onclick; you simply need to assign it the name of the function you created. In my case, the function was display. So if you used the same one on yours, put display, and let's send the first one a 0 because Southern Serenade is the first array element of our JSON object. The Enchanted Escape is element 1, and the Sandy Suite is element 2. So we'll save that, make sure it's been uploaded. Then let's open up our inspect inside of Chrome, make sure we can see the console. The array is loading correctly, and as we click on our button up here, we can see a value of 0, 1, or 2 being sent to this function on line 19. First thing we want to do in our function is to replace the room name with a real name. If we look in our source code HTML, we can see that the room name has an id of roomName. So let's jump to our JavaScript. Right under our console.log, we'll do a document.getElementById, and the ID is roomName, we just looked at that, innerHTML. And we're going to set it equal to the hotel information, which we're assigning on line 12, and then it's an array, and we're going to use x from our function so it gets the correct one, and then we're going to ask for the name of the room. Now if we come over here and we open an array, we can see that the name is 0.name, which we have here as .name. Let's save that, make sure it's uploaded, and let's click Southern Serenade. Sure enough, Enchanted Escape and Sandy Suite. We can see our x value being set as 0, 1, and 2, and our name is dynamically inserted without reloading the page. That's the beauty of AJAX. Next thing let's tackle is the description. It's going to be almost identical to line 20. This will change, and this will change. In our index, we can see that the description is desc, so this becomes desc. From our JSON data, we can open any of these and see that the description is the array 0.description. Hit refresh, click on a room, click on a room, and a room. And the description is loaded correctly. Now let's replace the photograph. This is slightly more complicated, but not too bad. We'll start by copying what we already have. We're going to getElementById, and go find out which ID. Switch to our source code. Let's find the photograph, and here it is, img with an id of photo. So photo is what drops into our JavaScript. And we're not setting the innerHTML. What we're doing is changing the source, src, which is this value right here. Currently it's set to images/placeholder.jpg, which is that white, washed-out graphic you can see here. We want to change it to the value that comes from our JSON data, so in hotelInfo.description. Well, that's not correct. So let's come back here. Here's photo. You can see it's just the array number with .photo attached. Hit refresh, click on any room, and the photograph dynamically loads and switches, based on our selection of the menus. Now we're ready to update the weekday cost and the weekend cost. Those are going to be very similar to the room name and the description. So let's copy one of those. Let's switch to our main HTML. We can see here on line 42 and 43 that the actual dollar amount is contained within a span tag. Each span has an ID of weekday or weekend, so that's our target. So this becomes weekday. Now, how do we get the weekday cost in there? It's not description. So if we open one of these objects, open the cost, which is also an element with two things in it, weekday cost and weekend cost, we mouse over it, wait, we can see that it's array number, .cost.weekday, cost.weekday. So we'll trust that we've got that correct, paste it, change this to weekend, and change this to weekend. Save it, make sure it's been uploaded correctly, hit refresh, click on any one of these, scroll down, and you can see the cost is showing up and $99, $129. Let's try the Enchanted Escape. There are those costs, as well as the Sandy Suite costs. Great. Now we're ready for the amenities. As you can see here in the console, if we open up any of these, the details contain an array. In this case, there are four elements under details. Each of those we want listed here as an amenity. So let's come in here, and let's use a variable that we created up here on line 3 called details. And we'll start by setting it equal to empty. And then we need to create a loop to go through all of the possible elements under details. We start off setting i=0. I is less than the hotelInfo, and we'll put an x in there. Remember, x references the number that's pulled in on line 18 that represents either room 0, 1, or 2. And we want the details of that room, and then we want the length of the details, or in other words, how many are in there. And then we want to increment one at a time. Let's start by checking to make sure it's even working, console.log. It's going to be hotelInfo, x.details, so let's just copy that so we don't have to retype it, the value of i, which should be 0, 1, 2, 3, and 4. So let's save that one, select any room, and Southern Serenade has a big-screen TV, free Wi-Fi, jetted tub, and a Blu-ray player. The Enchanted Escape has wine and roses, jetted tub, and a king-sized bed. So, it is pulling correctly. Now we just need to put it in something that's useful. So instead of just logging it out there, let's do details =+, and we already have hotelInfo right here, semicolon. Now that's not done, but let's start with that. When we're done with that loop, let's stick it into the page, which is going to be document.getElementById.innerHTML, is going to equal details. Well, we've got to go find out what the name of it is, so we switch to our index, and here it is. There's a division. It has an id of details. That's what we're going to stick it into. Notice this has a series of paragraphs inside this division. Keep that in mind. So there's details, we save it, hit refresh, click on any room, and there it is. Now if we take a look at this, it is a series of elements just strung together, and we really want these to be each a separate paragraph. So we'll come back here where we create the details list, and we'll in the front put ""+, and at the end, we'll do +"". Now inside of here, do an opening paragraph tag and a closing paragraph tag. So now each feature will be contained within a paragraph tag. And now we have a list of paragraphs underneath the amenities related to each one of these. So far, so good. Let's close his out for a sec, hit refresh. That doesn't look so good, but this works awesome. So what we want to do is overcome the generic feel of our page, which shows up until a room is selected. Let's select by default the Southern Serenade because it's the first item in our menu. So we will call this function on line 18 by using display, and we'll send it the first room, which is 0. So now, as soon as the onload function is called and the data is parsed, we'll immediately load the first item, which will trigger line 18. Save it, hit refresh, and the Southern Serenade is loaded by default when the page loads. I can then click any other room, and it is loaded as well. Remember the beauty of this. There is no re-downloading from the server. This is all done through AJAX. Because responsive design is important to us, let's take a look at this in different-sized windows. Let's start by inspecting. We'll switch this up to the side. We'll click on this toggle device toolbar, and let's take a look at this in, say, an iPhone 5. You can see now that our buttons are stacked, and everything is still presented correctly. If we switch the orientation it still works beautifully. Let's now jump to a larger, say an iPad, once again switching directions. Looks great. And then if we go to Responsive, which is any browser beyond that, we can simply adjust it and see how it's going to display on larger screens. In this module, we reviewed JSON data in an array and in named arrays and using an array for a value. We practiced these using Brackets. Finally, we built an awesome JSON-driven hospitality page. Now we're ready to build the weather application which loads JSON data from an external source using an API. Final Project: Weather Site Overview We made it to the last module, and we're ready to build an awesome responsive JSON-driven weather site. In this module, we will first show you how to get your own API key, then we will look at the documentation on the Weather Underground website. From that information, we will configure the two URLs we need for the AJAX requests. Next, we download the demos and finish the JavaScript needed to get and display the weather data. Finally, we will test our site on multiple devices and browsers. And if you want to hang around for one more bonus lesson, I will show you how to adapt the weather site to dynamically display the weather information for any ZIP Code. So here's some late-breaking news. After I created this course for Pluralsight, the Weather Underground quit offering free accounts. The information in module 5 is still valid, but you have to pay for access if you want to follow along. So now I've added another module to this course which uses the OpenWeatherMap as a source for free JSON data. You can watch both modules to see how different sites provide JSON data. Or you can skip straight to module 6 if you want to follow along for free using the OpenWeatherMap website. In order to complete this module, you will need to sign up for your very own free API key from the Weather Underground. Let me walk you through the process as it exists today. If their website changes, you'll have to poke around a bit until you find what you need. First, you need to join, and you can do that over here on the right side, provide an email and password, close the welcome box, which is an invitation to pay, but we don't need to do that, validate your email using the message they send to your email box. In the menu bar, look for the Weather API for Developers link. One of the key features is access to JSON-formatted data. That's what we want. Click Explore My Options. Choose Purchase Key. Don't worry; it's not going to cost you anything. Provide all the details for your new project. Here on the left, you can see your personal API key, which you will need once we start coding. Now let's look at the Weather Underground API documentation. Once again, click Weather API for Developers. That's us. Click the Documentation tab. The information we need does not come in a single JSON request, so we need to make two separate requests to get everything we need. Let's start by looking at conditions. If you scroll down the bottom of the page, you can see a URL to request the current conditions for San Francisco, California. That's the default. Click Show Response, and you can see the current JSON data for San Francisco. See this number right here? This is where the API goes that we purchased for free and then stored in a safe place. The next important part of this URL is the word conditions. This will give us the full name of the city, along with some other stuff. Next, we'll look at the forecast on the left side. If you scroll to the bottom of this page, again, you are shown a sample URL. You can see a URL to request the forecast for San Francisco. Click Show Response, and you can see the forecast JSON data for San Francisco. The next important part of this URL is the word forecast. It gives us the weather for the next several days. At the bottom of the geolookup page, we can see an example where we replace the city name with a ZIP Code. So we can get the JSON data for any ZIP Code. The information we need for our weather app will need to come from two different AJAX requests. One URL will get the current conditions, and the second URL will get the forecast information. Here's what the two URLs look like based on the API information we just looked at. In orange, you have your own personal API key. In blue, we have the ZIP Code of the city we're getting weather for. And of course, the word conditions for conditions and the word forecast for forecast. So here's the full AJAX request. Up here is the full path for the JSON data from the Weather Underground. We looked at that on the previous slide. We use GET as the method to retrieve the data and true to get the data asynchronously. Once the data has loaded, we check to see if the status is 200, and then we display it to the console. This is all a review. Now it's time to look at the demos for this module. In the demos file, I have provided the completed HTML and CSS and a JavaScript file that's been started. This is what the site will look like on your phone. You can see a placeholder information for the current conditions, as well as the forecast information for the next three days. Here's our responsive page on a medium screen, and finally, on a desktop. When we have finished the project, if you want to hang around, we'll look at a modification of the site to allow us to get the weather for any ZIP Code. So let's get started. Getting the External JSON Data Here's the demos.zip for module 5. When we open it up, we can see that there's a CSS folder, and image, and a JavaScript folder. This file is partially completed. The HTML is also complete. Let's open our editor, Brackets, drag the weather_final over here to the left pane to load it, and start with the JavaScript file. And it will open the index and launch it live. And there it is. In our JavaScript on line 4 and 5, we are creating 2 new XML HTTP requests, one for the current conditions, and the second for the 3-day forecast. The next two variables are going to be an object for conditions and an object for the forecast. Starting on line 9, we have an AJAX request to get the current conditions. Starting on line 32 is an AJAX request for the forecast, and we're missing some data in both of those. The first parameter in the open is GET, and we can put it there and down here as well. The second one is the URL. Let's go to the Weather Underground site, make sure that you've logged in, and then go to More and Weather API. Start with Documentation, then we'll start with conditions. Here's a sample. Let's go ahead and copy that, and we'll paste it. So here's the API key. That is currently the de facto one; we need to replace it with ours. Click on Key Settings, Copy, delete, and paste. That's now my API Key. We're after conditions, so that's correct. We are not after San Francisco. I'm going to use my current ZIP Code of 84653. Now let's copy that entire URL, scroll down to the forecast, and paste it. On the second one, we switch the word conditions to forecast. Save it, we already have a live preview set up, and if I refresh that and then inspect, switch to Console, I can see that there are two objects, the forecast object and the current_observation object. And then I can open those up, and I can see all of the information that's coming live from the Weather Underground. Displaying the Current Conditions Now that both objects are properly loading into our console, we can start to use that data to populate our interface. Let's start by replacing City UT with the real city information. Open current_observation, open display_location. I can see a city and a country and a state. But here under full, I have the city, state, which is what I want up here. So let's jump back to our index. Let's find the id of City UT, which is a location, which means in our JavaScript file we're going to do document.getElementById, location.innerHTML. We will set that equal to our conditions object, dot, then we can go back here if we need a refresher, mouse over full, .current_observation_display_location.full. And we'll put that right there with a semicolon. Save it. We can say that Salem, UT is successfully displayed from our JSON object. Now that we have one working correctly, let's go get the other two pieces of information that we need. We need the current conditions, and we need the current temperature. So back here we can see that we have weather and temperature as the two IDs. Let's look under current_observation once again. Down here we have weather, Mostly Cloudy, which we want to appear here where it says Current Conditions. As you can see, it is .current_observation.weather. So this simply changes to weather. Now we're looking for the temperature. (Working) We have temperature in Celsius and temperature in Fahrenheit. I'm going to choose .temp_f. (Typing) There we have those three pieces of information accurately displaying on our weather channel app. Displaying the Three Day Forecast In order to get the mix of clouds replaced with the current weather, we need to jump to our forecast. Now the forecast has a simpleforecast and a txt_forecast. Let's look at the txt_forecast, and we can see that the forecastday has an array for the next 8 days. The first object, 0, is today. So if we open that one up, we can see an fcttext, which is mostly cloudy, a few flurries---that's what we want to appear right here. Let's copy this document.getElementById, and we'll simply modify it, so instead of the cObj, it's now the fobj, which we can see here on line 40. The element we're trying to fill is desc, so that gets changed there. And it's not going to be current_observation. Instead, it's going to be forecast.txt_forecast.forecastday0.fcttext. So we'll put that in there, save it, and there's our conditions of the current weather. Next, we're going to do the weather for the next three days. And we could all seven days if we wanted, but once you get one day down, you'll pretty much have it. So let's come back here. Let's make ourselves a comment that says Day 1, which is tomorrow. What are we going to do? Here I can see a division for day 1, which is tomorrow, division for day 2, which is the day after, and of course, a division for day 3. So here I have sort of like a table, but I've set it up with spans. So I've got row 1, column 1, 2, 3, and 4. Then I've got row 2, column 1, 2, 3, and 4, and then row 3, column 1, 2, 3, and 4. So we're going to be filling in these four pieces of information. Inside the first one is the day of the week. Then we're going to have a picture that represents the weather. Then we're going to have a high temperature and a low temperature. In our main JavaScript, let's go ahead and copy this successful information, and let's tweak it a little bit. It's not going to be description; it's going to be row 1 column 1. And then this will be something different. This'll be row 1 column 3, and row 1 column 4. So here's our day of the week. Here's our high, and here's our low. We'll worry about the image here in a minute. So let's go see if we can find the day of the week. Let's start by opening the forecast object. Let's start with the simpleforecast. It has an array of 4; we'll open that. Here is today, here is tomorrow, here is the date. So this is the one we're after. You can see it's .forecast.simpleforecast.forecastday1.date.weekday. So let's type all that in, comment these two out, then we can see Tuesday. It appears right there. Now once again, open forecast, open forecast simple, forecastday, we're looking at day 1, we're looking at the high, here it is, and you've got a Celsius and you've got a Fahrenheit. We want the Fahrenheit version. So let's remove the comments, we'll put in the valid information, save it, and there's 46 degrees. Now we ant an actual little circle after it, so we're going to do a +"" and put a circle, which for me is Shift+Option+8. And there's our 46 degrees. To get the low information, it's going to be very similar. Forecast, simpleforecast, forecast day, day 1. There's the high; here's the low. Everything else is the same, except the word high switches to low. So we can copy this, remove these comments, paste in that full JSON path, switch this to low, and there we have it. Now let's grab the image. So we'll create a new variable, call it imagePath. We'll set it equal to fObj. Now let's go find out what it is. So forecast again, simpleforecast, forecastday, tomorrow, and there's icon_url, and we can see the full path displayed in our console. Save it. At this point, nothing has happened because now we need to do document.getElementById, and it says r1c2.src. Now why is it source? We did this before, but you can see here that row 1 column 2 is the id of the image tag, so we're going to set the source of that equal to the path provided to us by the Weather Underground in this piece of JSON data. So we'll set that equal to imagePath, which you have right there. And there's the image that represents tomorrow's weather, partly cloudy with a little bit of sunshine. Now that we've got one day rolling, it's going to be very, very easy to get day 2 and 3 rolling. We simply copy all of this information, make it Day 2, and because we're using an array, day 1 is tomorrow, so this becomes the day after, 2, 2, 2, and 2. And instead of row 1, it's now going to be row 2 for each of these, which is the second row. And there we have the second one. Drop in to day 3, grab the array element 3, switch it to row 3, save it, and there's the next day. Close this down. There's our desktop version, tablet version, and phone version. Modification to Display Any Zip Code To make our modifications, we're going to add some information both to the index.html and to the main.js inside of our index.html, we're going to add a new nav section. And inside of that, we're going to put two things. We're going to start with an input. We'll set the maxlength equal to 5 because that's how long a ZIP Code number is. We'll give it an id equal to zip. We'll set the default value equal to empty. Next to that, we'll create a button. The button is going to say Check this Zipcode, and it's going to have an onclick action. Now we have not created this function yet, but I'm just going to remember when I do, to call it loadWeather. Now I'm going to be using the live preview because live preview inside of Brackets doesn't play well with an onclick. So we'll just load the page into a browser. Let's save that. Now that our changes are in place, let's open up the index. We'll double-click it to open it straight into a browser. We can see our input and our Check this ZIP Code. Now we're ready for the changes to main. Our JavaScript file is currently set up so that when the page is loaded, it automatically gets the data for this assigned ZIP Code. In order to make it work when we click a button, we need to put that information inside of a function. We've already defined that function here as loadWeather. So let's go to our main.js, and let's start with a new function called loadWeather. And inside of that function, we'll put the pieces that are responsible for making the load happen. In this case, the conditions are loaded with lines 16 through 18, so let's cut that and put it inside of our function. Lines 40 through 43 are responsible for the forecast information. Let's save that, hit refresh. It doesn't load. We click check, and it loads the information for the conditions and the forecast based on this hardcoded ZIP Code. So the next thing we want to do is make this a dynamic URL. So let's create two variables. The first one will be called conditionsPath. The second variable will be called forecastPath. We'll then take the conditionsPath, remove it, put it up here, and we'll take the conditions variable and put it down here inside of our open statement. Now let's do the next one. Here's the forecastPath. Remove it, paste it, and replace it with the variable. Now, let's make sure that we haven't broken anything. So let's refresh it, it doesn't do anything until we check, and it loads correctly. Next thing we're going to do is create a variable called zip, and we'll set it equal to 84653, which is the variable we are using down here. And now we're going to concatenate the conditionsPath and the forecastPath with the zip variable. So I'm going to come in here and I'm going to delete this, put "". Between the quotes I'll put two plusses, and in between the plusses I put the variable name zip. Same thing down here. Delete the ZIP Code, "", between them ++, between them zip. So now we have a string connected to a ZIP Code variable connected to a string, all of which becomes the conditionsPath, which is dropped in here in the open. Save it, hit refresh, click the button, and breathe a sigh of relief because it's still working correctly. So now we need to set the variable zip to be dynamic instead of hardcoded. So we'll set the zip equal to document.getElementById, and to refresh my memory, I'm going to go back to my index. I'm going to look for the input and remind myself that the id is zip. Go back here, and we're going to set it to the value that's inside of that. Save it, jump back to our browser, we'll now put 84653, hit check, and it loads the value for that. Let's try a different one. Click check, and now we're getting information for a different city. Very cold and snowy today. Now that that's working, when we enter a ZIP Code, what we want to do is have it work if no ZIP Code is entered, and someone accidently clicks this Check this ZIP Code without actually entering a value. So we'll come in here and set up a condition. If the ZIP Code is equal to empty, that's what three equals is, then we're going to set the zip equal to a default value. That way, if I click Check ZIP Code and I don't enter a value, it gives me a default value. And of course, we already tested this. If we enter a value and check, then we get that value. We have one more problem left to solve. When we very first load the page, nothing is loaded. So what we want to do is call the loadWeather function, and we'll just do it down here at the bottom of the page. So now when the page loads, the default ZIP Code is automatically used, the weather JSON information is automatically loaded, and if we choose anything else and check, we can now see another ZIP Code. So that constitutes our final modification of our weather site so that we can get weather information from any ZIP Code and have it displayed on our page. Before we test our site on multiple browsers and multiple devices, I'm going to upload the finished product to my sandbox. Now I can pull up my browser, pull up my sandbox, click weather_final, and here it is, working on my Chrome browser. Let's copy this URL. Let's open three additional browsers. I can see it working in Safari, Opera, and Firefox. We can also see our weather application working in Internet Explorer 10. We can also see it working on my iPhone 6 and my tablet. And it works in landscape mode as well. To make our app a little bit more user friendly, we've added some code to the head of our document for custom icons, and you can see an icon folder with a bunch of different graphics of different sizes. This allows us to click Add to Home Screen. The icon that you see here on the left is the one from the icon folder. The name is the name that appears right here on line 22. And if we click add, it creates an icon on our home screen. And when we open that up, it no longer looks like a web page from browser, but it actually takes over the entire screen just like an app would. In this module, you got your own personal API key for the Weather Underground, looked at the API documentation, and then created two URLs to get the correct weather information. Finally, we built and then tested our completed web app. Then if you hung around, we looked at a simple modification to allow us to enter any ZIP Code and get the weather information for that location. We've covered a lot of valuable information in this course, and I hope you have learned something that will be beneficial. Final Project: Weather Site II Overview In this module, we will use the same template, but grab our JSON data from the OpenWeatherMap website. In this first module, we will show you how to create an account on OpenWeatherMap. Then we'll look at the documentation. Next, we'll download the start file and build the app. Finally, we'll test the page on secure and nonsecure web hosting. In order to complete this module, you will need to sign up for your own free API key from OpenWeatherMap. Let me walk you through the process as it exists today. If their website changes, you'll have to poke around a bit till you find what you need. First, you need to click the Sign Up button at the top of the screen. On the sign-up screen, fill out all of your personal information and then create an account. They asked me how I was going to use my account. However, you may not see this screen. Now let's find your API key and look at the documentation. Click the API key menu item and copy your key to a safe place. We're going to need it in a minute. Please do not use mine, or it will cause problems with my account. Now let's look at the API documentation. We can see that they provide data for the current weather conditions, the 5-day, every-3-hour forecast, and the 16-day forecast, if you have a paid account. For this project, we'll be using both the current weather and the 5-day forecast. Under Current weather data, click the API doc button. Here we can see that data is provided by city name, by city ID, by geographic coordinates, which is longitude and latitude, by ZIP Code, etc. For this example, we will be using ZIP Code. Here they show you an example of what the API calls should look like and what a response will look like. We will be pulling specific information from the response and putting it on our web page. So here is the full AJAX request. Up here is the full path for the JSON data. We will use GET as the method to retrieve the data and true to get it asynchronously. Once the data has loaded, we check to see if the status is 200, which means it worked. Then we parse the incoming data as JSON and assign it to the variable x. Then we display it to the console so that we can see that it worked. Now it's time to look at the demos for this module. In the demo, I have provided the completed HTML and CSS and a JavaScript file that has been started. This is what the site will look like on your phone. You can see the placeholder information for current conditions, as well as the forecast information for the next three days. Here's our responsive page on medium screens, and finally, on a large screen. Current Weather Conditions Please get a clean copy of the weather_start from the demos in this unit. Open it in your favorite text editor and open the index file in Chrome. I also have the inspector open so we can watch the console. When we load the page, we see errors in the console. That's because we have not provided the correct information to the open on line 10 and again on line 33. Remember from the documentation that the current weather information comes from a different URL than the 5-day forecast. So line 10 will be for current condition data and line 33 will be for the forecast data. To keep things simple, please comment out line 33 and 35 so we're not continually seeing errors. Let's review what we have. We have 2 XML HTTP requests on lines 4 and 5. On lines 6 and 7, we are creating variables for the conditions object and for the forecast object. Now on line 10, we need to set the method to GET inside the first set of quotes. In the second set of quotes, we'll put a value provided by the OpenWeatherMap website. Under the API menu, select the current weather documention button, scroll down to ZIP Code, and copy the example API call. Between the second set of single quotes, type http:// and then paste. Please change the ZIP Code to 84653, which is my hometown of Salem, Utah. When we refresh the page, we see that we have a 401 error unauthorized. That's because we need to add our personal API key. Here's the path that we copied from the website. Notice that it has a question mark followed by zip=94040,us. This is called a name-value pair, and they are passed from our website to the OpenWeatherMap website. We will be adding additional name- value pairs to this link as we move along. We need to add another name-value pair for the API key. Please type an ampersand to start the next name-value pair. Type appid, which is the name, followed by an equals, followed by your long API key. I'm going to go back to the website to get my key. I will click on Sign In, and then API keys. Please don't use mine, or it will break, and you will get frustrated. Now when you refresh the page, you can see the object displays in the console, just as we asked for here on line 17. We're trying to get the weather information for Salem, Utah. If I click the down arrow and look for the name, I can see that the city is Provo, not Salem, as I requested. Well, Provo is about 15 miles north of Salem. It seems that even though they boast of having over 40,000 weather stations around the world, they do not have one in every small town. We will just have to be satisfied with the weather that is near to Salem. If you open the main arrow, you'll see the temperature's displayed in kelvin, not Fahrenheit. Since I want to see my temperature in Fahrenheit, I will add another name-value pair to the path. Type another ampersand and then units=imperial. Now when you refresh the page and open the object, you'll see the temperature showing as Fahrenheit. Now that our data is correctly displayed to the console, let's take that information and display it on the web page for end users to see. Open the index.html and look at lines 45 through 48. These are divisions with IDs. We can assign dynamic values by referencing the IDs in our JavaScript. On line 18, type document.getElementById. Use the ID of location, which we saw in our HTML. Now type dot and innerHTML, and we'll set it equal to the current conditions object we created here on line 6. Now switch back to the browser. Mouse over name next to Provo. You can see that we need to access this value using .name. Remember to finish with a semicolon. Refresh the page, and you should now see Provo as the city. Now let's do the weather description. Copy the location line and paste it below. Change the location to weather, as shown in the HTML. Click the object and open weather. Then open 0 to see the description. When you mouse over description, you can see that it can be accessed using weather, 0 in square brackets, followed by a dot and description. When we refresh the page, we can see that the description is now appearing on our page. Temperature is very similar. Copy the previous line, paste it below, insert temperature. We can see that the current temperature showing in Chrome is main.temp, so we will add that here. In the previous module, when we accessed data from the Weather Underground, they provided a long description of the weather. This information is not available here, so let's make a minor modification. We will add windspeed under the temperature. Copy the temperature line and paste it below. Look at the HTML, and we can see that the id equals desc. In the JavaScript, change this to desc, and change the reference to wind.speed. While this works, it's useless data to our user. They need to know what this value's for. Please add ""+ here in the code. Between the quotes, type Wind Speed. Now when we view the results, it looks better. Now we're ready to tackle the forecast. Adding Forecast Information Now we're ready to tackle the forecast. Please uncomment open and send. The open method for the forecast is identical to the current conditions, with one exception. Type GET here, and then copy and paste the second parameter here. Open the OpenWeatherMap website and choose API. Under the 5-day forecast, scroll down to ZIP Code. Notice that it is the same, except for the word forecast, so we'll change our word to forecast and save. When we refresh our page, we can see another object displayed in the console. I'm going to comment out the first one so we don't make any mistakes. Now I'm only seeing one object in the console. Notice that it has a list of 40 items. That's because it reports every 3 hours for 5 days. That's 8 times a day for 5 days, or 40 items in the array. Let's open the first element and see what we have. Notice that the dt_txt shows the year, the month, and the day. It also shows the hour. For each new item, the hour advances by three. In our HTML, we can see that there is a row and columns set up as IDs. This is a pattern I made up just to keep it simple. Let's set row 1 column 1 to forecast object using list0.dt_txt. Now that works, but it's a little overkill. Let's use JavaScript to remove the year and the time of day. Create a new variable called date_raw and set it equal to list0.dt_txt. Now we can use a substring to chop off the ends. We'll start the substring at character 5 and end it at character 11. Remember that strings are 0 indexed. Now let's display the new variable to row 1 column 1. Now let's display an icon representing the current weather in row 1 column 2. Notice that in the HTML, I have given the image tag the id instead of the span tag. That's so I can use JavaScript to assign the source of the image. Under the array element, we can open the weather, and under the 0 array, there's an icon name. After poking around a bit, I discovered that these icons are all stored in a specific location on their site. The full path to the weather images looks like this, with the filename here. Remember that the filename is given to us in the JSON data. We will need to create a dynamic path that includes the image name from the JSON data. We will create a new variable called icon_path =, and ""++"";. This first part goes between the first two quotes. The filename extension goes between the last quotes. The variable icon code, which we pulled from the JSON data, goes between the two plusses. When we're done, it looks like this. Please create a new variable called icon code and set it equal to the forecast object. Chrome will show us the path to list 0, weather 0 icon. Notice that I am not adding quotes inside the square brackets, as they're really not necessary. Now we type the code we just saw on the previous slide like this, where we build the full path to the icon using three different parts. Now all we need to do is set the source of row 1 column 2 to the variable icon path, and it should work. The next two are the temperature maximum, which we can see here in Chrome, and the temperature minimum, which we can see here. Set the innerHTML of row 1 column 3 to list 0.main.temp_min. Set the innerHTML of row 1 column 4 to main.temp_max. Once again, we have a usability problem conveying what these numbers represent. Let's add an HTML entity for degree to the end of each one. Type a +"". Then put the ° between the quotes. Now look at your end product. Now all we have to do is copy and paste for the next two days. Please copy everything after the console.log. Paste it after. Please change the 4 references from row 1 to row 2. Next, change the 4 references to the list array from 0 to the next day, which is 8. Seriously, that's it. Copy and paste that block of code one more time. Change the 4 references from row 2 to row 3, and change the 4 reference to the list array from 8 to another 8, which is 16. Now we're ready to upload this to the server and run some tests. I am putting this on a nonsecure website. As you can see, everything loads correctly. Now let's upload it to a secure site with an SSL certificate. Everything's broken, and I'm getting warnings in my console about blocked content. To solve this problem, we need to go back to our editor. Start with line 10. We are forcing the data to be loaded over HTTP, which does not work over HTTPS. If we remove the HTTP and leave the two forward slashes, it will work on both secure and nonsecure web hosting. But unfortunately, it breaks when we try and run it locally. There are five uses of HTTP, two for loading JSON data, and three for loading images. With these removed, the file no longer works on our desktop. When we upload it to a nonsecure server, we have success and no console errors. When we upload it to a secure server with an SSL certificate, we have success and no console errors. In this module, we showed you how to create an OpenWeatherMap account, then we looked at the documentation. Next, we downloaded the start file and built the app. Finally, we tested the page on secure and nonsecure browsers and found a solution so it would work on either one. Course author Paul Cheney Paul Cheney is a professor of Web Design and Development at Utah Valley University, where he teaches Responsive Design. He also owns his own web design company, which allows him to keep current in... Course info LevelBeginner Rating (110) My rating Duration1h 43m Released20 Mar 2017 Share course