Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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
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 the 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
ready state, status, and response text.
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
You need to sign up for Treehouse in order to download course files.
Sign up