Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

AJAX Basics

Well done!

You have completed AJAX Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Processing JSON Data

7:48 with Dave McFarland

In this video, we'll continue with our intranet project. Now that we have a JSON response from the server and parsed it, we need to turn it into HTML and add it to the web page.

Now that we've converted our JSON data into usable JavaScript, 0:01
it's time to look at how we will output that information to our web page. 0:04
At this point, we can put aside our programming skills and 0:09
put on our web designer hats. 0:12
We need to think about the HTML and 0:14
CSS we'll use to effectively present this list on our page. 0:16
A simple way to do this is to create an HTML and CSS mockup of your final design, 0:21
the way the page will look after you've updated its content with JavaScript and 0:26
AJAX. 0:31
In this project, you're pretending that the designer at your company 0:33
gave you sample HTML and CSS for you to use. 0:36
Let's look at the finished project again. 0:40
You can see each employee is listed on a separate line. 0:42
If the employee is in the office, a green in icon appears next to their name, 0:45
otherwise, a red out icon is displayed. 0:49
Let's look at the HTML that our designer gave us. 0:52
It's a basic unordered list. 0:55
The most important part here is the HTML, 0:57
because that's what we need to generate using JavaScript. 0:59
Fortunately, this example is really simple. 1:03
There's one list item for each employee. 1:05
We'll list the employee's name inside an li tag, and 1:08
if the employee is in the office, we'll add a class of in. 1:11
If he's out, then we'll add a class of out. 1:15
The CSS uses the before and after pseudo-classes to display the in and 1:17
out icons. 1:22
You can see the teacher's notes below if you want to learn more about 1:23
how to use pseudo classes in your CSS. 1:25
To generate the HTML, we need to build one list item for 1:29
each employee in the company. 1:32
In other words, we want to take our JSON data and convert it into this HTML. 1:34
To do this, we'll need to look at each employee in the list and do the following. 1:39
First, create a new HTML list item. 1:43
Two, check the inoffice property. 1:47
If the value is false, we'll add a class of out to the li tag. 1:50
If the value is true, then the class in will be added to the tag. 1:54
Third, we need to get the value for 1:59
the name property, that's the name of the employee, and insert it inside the li tag. 2:00
Fourth, close the li tag. 2:06
After we process the entire array of employees, 2:09
we'll have a series of li tags that we can add to the web page. 2:12
Okay, let's build the HTML for our widget. 2:17
Let's start by creating a variable. 2:20
This variable, statusHTML, will hold an opening ul tag or unordered list tag. 2:22
We'll build up the list of employees by adding more HTML to this variable and 2:29
then finally print the contents of this variable to our web page. 2:33
Next, we'll create a loop to run through the list of employees. 2:38
Remember, we created an employees variable to hold the array of employee names and 2:42
statuses. 2:46
We need to go through this array one item at a time, 2:48
retrieve the employee's name and determine if he or she is in the office or not. 2:50
In JavaScript we commonly use for loops to go through an array of data. 2:55
Here's the basic structure of a loop to run through the list of employees. 2:59
The loop starts by setting a counter variable, i, to 0. 3:03
The middle part of the for 3:09
loop is a test condition, which determines how many times the loop is going to run. 3:10
In this case, as long as the value stored in the i variable is less than 3:16
the length of the employee's array, we run through the programming in this loop. 3:20
Finally, after the loop runs each time, 1 is added to the variable, i. 3:26
In other words, this loop will run once for each item in the array. 3:31
An item in an array is represented by an index value. 3:37
The first item has an index of 0, the second an index of 1, and so on. 3:40
So to get the first item in the employees array we use an index of 0 like this. 3:45
The second employee has an index of 1, but we don't need to type in the numbers 3:51
ourselves, we use the loop to access each item in turn. 3:55
To do this, just replace the number here with the counter variable i. 4:00
[SOUND] The first time through the loop i is 0, and 4:04
we can access the first object in the array. 4:08
In this case, the first item is a JavaScript object. 4:13
It has two properties, name and inoffice with the values of Aimee and false. 4:16
In JavaScript, we get to the properties of an object 4:22
using what's called dot syntax or dot notation. 4:26
We've actually already seen that using AJAX. 4:29
Remember the XML HTTP request object? 4:32
It has its own set of properties, like readyState, status, and responseText. 4:35
We access those properties by typing the variable name we gave to the xhr 4:41
object followed by a dot, then followed by the property name, 4:45
xhr.status, xhr.readyState. 4:49
We can access the properties of our employee objects in the same way. 4:54
For example, to select the name of the first employee in the list, 4:58
we start by selecting the first object in the list, employees[0], 5:01
then add a dot and the property name, employees[0].name. 5:07
To access the office status property, you type this, employees[0].inoffice. 5:12
The next time through the loop, i will have a value of 1 and 5:19
the second item in the employees array will be selected. 5:22
Now inside this loop, we'll build a single li or list item tag for each employee. 5:27
Let's start by creating a conditional statement that checks to see if 5:32
the employee is in the office. 5:35
If he or she is, let's add an opening li tag with the class of in. 5:38
statusHTML is the variable that we created earlier, and 5:44
we'll just keep adding more HTML to it each time through the loop. 5:47
The plus equals operator in JavaScript means take the current value of a variable 5:52
and add something to it. 5:56
In this case, we keep adding more and more HTML to the statusHTML variable. 5:58
We also need to deal with the situation when the employee is not in the office. 6:03
We can do that by adding an else clause. 6:08
Next, let's add a name and then close the tag. 6:18
So as the loop runs, the statusHTML variable will continue to grow 6:30
with one new HTML list item added each time through the loop. 6:34
At the beginning of the loop, statusHTML has a value of 6:39
ul class="bulleted", the opening ul tag. 6:43
But by the end, it should have a big chunk of HTML that ends with the closing ul tag. 6:47
Now it's time to inject the HTML into the page. 6:55
This part is easy, we did something similar to this in the last stage. 6:58
We'll select an HTML element on the page and insert new HTML inside it. 7:02
In this case, if you look at the index.html page, 7:09
you can see that we already have an empty div tag with an ID. 7:12
So we can start by selecting that element and putting the HTML in there. 7:17
Let's go back to widget.js. 7:21
I'll select the element, and 7:24
then we'll set the innerHTML property to the statusHTML variable. 7:32
Let's save these files and see how it works. 7:39
Awesome, the JSON file loads via AJAX and is converted to HTML by JavaScript. 7:43