Processing JSON Data

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