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