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
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up