New terms from treehouse – AJAX Basics Part 2 – jQuery and AJAX and AJAX and APIs

jQuery is great in that it makes me feel less terrible about my JS skills. It also makes working with AJAX extremely simple and quick. Many people exclusively use it for their AJAXin’.

We are apparently able to replace all the code we had to write out for the first example with just these lines:

Screen Shot 2014-10-13 at 12.44.55 PM

The #ajax selects the div on the page with the id ajax, and the .load method is shorthand for requesting a bit of html and then loading that into the page. It is one of many helpful AJAX functions in jQuery. We can then hide the button with the .hide() method.

Screen Shot 2014-10-13 at 12.47.51 PM


jQuery’s AJAX Shorthand Methods

They made these for the most common kinds of AJAX requests, listed here. .get() method is a way to send a GET request to your server. This actually doesn’t use a selector, we can just use it with the dollar sign jQuery symbol. It takes a few arguments. The first is the url, the one you’re making the request to. The second is optional, and is data you send to the web server, which is added to the url as a query string. You can actually use JS objects here instead of just a string.

For example, if you want this:

Screen Shot 2014-10-21 at 1.06.45 PM

You could actually do this:

Screen Shot 2014-10-21 at 1.07.08 PM

The third argument is the callback function, which is the code that runs after the response from the server. The difference with jQuery is you don’t need to check the XHR ready status or for any errors. It’s only run when the AJAX request is complete and successful. You write it like this, and the response argument in the function is the same as the responseText property of the XHR object from the last stage.

Screen Shot 2014-10-21 at 1.10.31 PM

You can also insert the info directly in instead of using variables.

Screen Shot 2014-10-21 at 1.12.25 PM

Let’s see how we can replace the load() method with the get() one.

Screen Shot 2014-10-21 at 1.14.07 PM

Note that the load method is easier and less code. It’s just nice to have different ways to do things.


Office project revisited

Here we’ll rewrite this project in jQuery rather than JS. jQuery has a AJAX helper function called getJSON() that not only performs the necessary AJAX requests, but also parses the returned JSON file. It works like the get() method seen before.

We’ll start with $(document).ready, which is a jQuery function that waits for all of the HTML to load before running the code. This is required only when including the link to your js files in the head of the file, before the body of the html.

Screen Shot 2014-10-21 at 1.27.53 PM

Note: he added the comment to say what the closing brackets are for, which helps clarify things when writing jQuery.

We then add in the getJSON method, which accepts the same arguments as the get() method. The data argument is optional, and we won’t use it here. Once again, we can create a variable or insert the value or function in directly. Note: the response here is expecting to receive JSON, if the server sends back anything else, like plain text or XML, the getJSON method will fail. We can then start adding to the anonymous callback function. We’ll set statusHTML to an opening ul tag with the class bulleted.

Screen Shot 2014-10-21 at 1.34.58 PM

Remember, the JSON file we’re linking to is just an array of objects containing the name and their in/out status. Before, we used a loop. In $, we can use the .each function, which works the same way.

Screen Shot 2014-10-21 at 1.36.28 PM

For the array argument, you enter the index number for the value you want, like the i in a for loop.

Screen Shot 2014-10-21 at 1.38.08 PM\

Screen Shot 2014-10-21 at 1.39.19 PM

So in our example, data is the array we’re referring to. Then for each object in the array, value has two properties, each with a value, for name and inoffice.

Screen Shot 2014-10-21 at 1.40.36 PM

Let’s add that to our code. We’ll name the second argument in the anon function employee, since it’s basically a list of objects containing info on employees. The rest of the code is basically the same as the last one where we add list items with a certain class depending on the value of employee.inoffice. Make sure to add the closing ul tag outside of the loop, otherwise it will add one every time. We then add the html to the page using the .html() method, using our statusHTML variable as our argument.

Screen Shot 2014-10-21 at 1.52.09 PM


Posting Data with jQuery

The get() method is good for small things, like an email address, but for larger things, like a blog post, use post(). It’s for data meant to be stored in a database. It takes 3 arguments again, the url you’re sending to, the data you want to send, and the callback function you want to run after it’s sent and you get the response. For the data, you can use a JS object like for get(), but more commonly you’ll want to use data from a form.

Screen Shot 2014-10-22 at 11.52.54 AM

jQuery’s serialize() method can take a form’s worth of fields, encode them and prepare the data to be sent to the server. Below, we show how to use it:

Screen Shot 2014-10-22 at 11.58.04 AM

First, we use the $(document).ready because they put this code in the head section. Then they select the form element, and put a .submit() event handler so this triggers when the form is submitted. Then, they prevented the default action of the form so the submit button wouldn’t work as it normally would. Then, they created an attribute for where we’re posting to, url, and the data of the form, formData. For form data we use .serialize(), which goes through all the form fields and encodes them for us. Finally, we do a post() and finish up by having it change the html of the #signup element once it’s complete.


The AJAX method

get() and post() are actually built from a more complex and robust method, the $.ajax() method. It takes a url for the request, like the others, but then also a JS object containing key value pairs that set various other options of the request. They are listed out in the documentation above. Let’s redo the last post example with this one. Basically you plug everything you need into the object.

Screen Shot 2014-10-22 at 12.08.13 PM

So why use this? For flexibility. The get(), post() etc shorthand methods are convenient but limited in comparison. For example, you can set a timeout, to wait a certain amount of time to hear back from the server. After which you can quit the AJAX request, and do something else. Or if you need user authentication, you can set that up to pass along with the request. Still, the shorthand methods are useful for most requests.


Handling Errors

jQuery’s AJAX functions fail silently, meaning that your callback function won’t work in that case. Sometimes that’s okay, but sometimes you want to let your users know that’s a problem.

Let’s say you’re building a chat app. You submit a message with a form, and it gets sent to the server via AJAX. Then, the recipient receives it via AJAX as well.  But what if there’s an issue where it doesn’t send? You should notify the user.

The .fail() method’s purpose is to run a function when an AJAX request fails. It can be used for all of jQuery’s JAAX methods except the .load() method. Since jQuery supports chaining, where you tack on one method to another, you can simply add fail() to the end of another.

Screen Shot 2014-10-22 at 12.24.16 PM

It takes a single argument, a callback function that runs if the request fails. jQuery passes several arguments to it, but the only really useful one is the first, a jQuery XHR object (jqXHR), which is an enhanced version of a regular XML Http object we learned about earlier and includes extra helpful properties, like info about the error via the .status property. Here we show that using the alert function.

Screen Shot 2014-10-22 at 12.29.04 PMScreen Shot 2014-10-22 at 12.29.15 PM

If you instead use the .statusText property it will explain it via text and you can give that to the user.

Screen Shot 2014-10-22 at 12.31.04 PMScreen Shot 2014-10-22 at 12.32.44 PM

But, if you just want to print the error to the page there’s an even easier way, just create a variable with a string explaining it, and add that to the html. Not sure why he wrote the variable and then added to it though, you could just do it all in the line where you declared it.

Screen Shot 2014-10-22 at 12.33.55 PMScreen Shot 2014-10-22 at 12.34.58 PM

Remember, .fail doesn’t work for the $.load method, nor for remote AJAX requests that use JSONp, which are requests to a different web server.


AJAX and APIs

What is an API?

All sites let you access them using a web server, but some also provide a method from accessing content from another webserver via a server-side language like php or ruby. An API, or, Application Programming Interface is the method that let’s you connect your site to a third part web service, like youtube or flickr. It defines what you can get from a web server, and how you get it. Each site that has one has it’s own unique one. Some have JS API’s that you can access via AJAX, without the need of a server-side language.


Flickr’s API

Most API’s will make you apply for an API key, where you let them know who you are and what you want to use their API for. It acts sort of like a password, when you connect to their web server you need to send along your API key. It let’s them know who is making the request, and limits access to the service and content accordingly. This let’s them revoke the key also if needed, if you’re doing something bad or requesting too much.

Flickr offers a trimmed down version of their API that’s freely accessible and doesn’t require a key. The Flickr feeds page list urls that let you do this. We’ll be using the public feeds one. It let’s you search for posts by a particular user or tag. By default, https://api.flickr.com/services/feeds/photos_public.gne, the result it gives you is in XML, but to request JSON just add the query string: https://api.flickr.com/services/feeds/photos_public.gne?format=json

Screen Shot 2014-10-22 at 1.02.29 PM

Still, that’s hard to read, so chrome has a JSONview extension which helps.

Screen Shot 2014-10-22 at 1.03.29 PM

It lists out helpful properties. The items property is formatted like a JS array, where each value contains info for a photo, like its title, where it can be found, and a link to a thumbnail sized image.

Now, remember the issues with requesting info from another web server via AJAX. The solution – browsers let you link to other types of files like CSS, images and JS ones, so we link to a JS file on the Flickr server. The trick is Flickr is really sending us the photo data wrapped in a JS file, accomplished using JSONP, which loads the JS file from another server.


Beginning the project

Goal here is to make a site that loads images from flickr based on certain tags. Here’s the game plan:

Screen Shot 2014-10-22 at 1.12.01 PM

We’ll start with the $(document).ready function since we’re linking to it at the beginning of the file. Now we want to select the word on the button. We’ll select anything with the tag button, then use the .click() helper method, which will add a click event handler to each of the buttons, meaning it will run its function each time one of the buttons is clicked.

Screen Shot 2014-10-22 at 1.33.51 PM

First thing is we want to highlight the clicked button. Let’s do this by adding a class to the clicked button. Remember, “this” means that the class will only be added to the one that was clicked, and not the other ones.

Screen Shot 2014-10-22 at 1.36.57 PM

This is good in that it highlights that button, but bad in that it remains highlighted if we click another. So, we’ll make it remove the class from all the buttons whenever a button is clicked, then add the class to the button that was clicked using this.

Screen Shot 2014-10-22 at 1.37.21 PMScreen Shot 2014-10-22 at 1.38.15 PM


Making the AJAX Request

Now it’s time to make a JSON call using the getJSON() method. We want to send it when a visitor presses on of the buttons, so we’ll put it inside the click event as well. Remember, it takes three arguments, the url to the resource, any additional data, then the callback function.

We add “?jsoncallback=?” query string to the url to tell flickr we’re making a JSONP request, and let’s us get around security limitations.

Screen Shot 2014-10-22 at 1.57.41 PM

Next step, we need to send data, using the flickOptions variable. We need to send different things depending on which button is clicked. We can use the .text() method to get all the text inside the element along with “this” again. Flickr is expecting the data in the form of a JS object, so make a variable with flickOptions and set it equal to an object. We’ll set the tags‘ key value equal to the animal variable, which contains the word of the button pressed. The options available for the keys in the object we send as data are listed here. We can also use the format key to say we want JSON instead of XML.

Screen Shot 2014-10-22 at 2.04.50 PM

Now to do the callback function. You’ll see it receives one argument, named data, represents the JSON data returned by jQuery, which has been parsed into usable JS.

Screen Shot 2014-10-22 at 2.08.05 PM

Note that you can also just plug everything in directly to the getJSON() method rather than create variables.

Screen Shot 2014-10-22 at 2.07.43 PM


Now to write the HTML to display the photos. First we’ll create a variable photoHTML that will contain the html that we can add to. Since we’re doing this 4 times in a row for four pictures, we’ll use a loop via the .each() method. It’s structure looks like this:

Screen Shot 2014-10-22 at 2.21.22 PM

It takes two arguments, an array and a callback function that is applied to each thing in that array. The i is the index value of the item, and the item is the actual value. Here’s an example of how this would work.

Screen Shot 2014-10-22 at 2.23.12 PM

You could also write this using a simple for loop in JS, like below, but jQuery makes it easier.

Screen Shot 2014-10-22 at 2.24.10 PM

Ok, so data is the JSON we received back as JS, and the items property contains all the properties we need. So, we write data.items. NOTE: you can call the arguments whatever you want. We’ll stick with i for index, but change item to photo since that makes more sense.

First, we’ll add the opening list item tag. Then we’ll add the link, getting the href value from the photo.link property. Remember, we’re using photo there because we defined that as our value for the index specified. data.items just says what overall array we’re referencing. Then, we want to add an image tag, with the source from photo.media.m. We’ll then close the a and li elements. Finally, we close the ul tag outside of the loop, and add this variable to the html of our page.

Screen Shot 2014-10-22 at 2.33.01 PM

Screen Shot 2014-10-22 at 2.52.44 PMScreen Shot 2014-10-22 at 2.52.53 PM


New project – make it so you can enter a word and search for a tag, rather than having to click a button.

Screen Shot 2014-10-22 at 2.57.08 PM

Pretty much just change the event handler to work for form submits, then change the tags value to what the person entered.

Screen Shot 2014-10-22 at 3.08.03 PM

To improve it, let’s disable the input and change the submit button while the AJAX request is running.

Screen Shot 2014-10-22 at 3.14.15 PM

But, we also need to reenable them once the form is done. We’ll do that by adding them at the end of the AJAX callback function.

Screen Shot 2014-10-22 at 3.16.35 PM

Advertisements

New terms from treehouse – AJAX Basics Part 1 – AJAX Concepts and Programming AJAX

AJAX stands for Asynchronous JS And XML. It lets you update html without loading a new webpage. Examples include when you load google maps, then search for a new location and the map/ui change. Or, in twitter with it’s endlessly loading tweets as you scroll down. Or, when you upvote something on reddit.

Normally, you get more web content by loading a new webpage. AJAX is faster and easier, the web page requests info from the web server (the Request), which then returns the data to the web browser (the Response), which JS then uses to selectively change parts of the web page. The amount of data returned is usually much less than a full web page.

To see a pages AJAX requests, open the JS console > right click > Log XMLhttp requests. XHR is short for XML http requests. AJAX isn’t actually its official name. Technically it’s called the XMLHttpRequest Object, or XHR. Example: you sign up for a newsletter, the page sends a request and the server does something, like adds your email to a database, then sends a response which makes the page display a “success” message.

JS is the programming language used to make AJAX happen. It’s used to send out a AJAX request, process the incoming response, then also to update the page. The asynchronous refers to how the request is sent to the server. They are sent without waiting, otherwise they would freeze your browser until you got a response back  (which might not even happen). With asynchronous, the page continues loading regardless. This let’s you send out multiple requests, and you won’t know which will come back first. They’re affected by the speed of the server, the complexity of the request and any internet traffic. XML stands for extendable mark up language.

There are four steps.

1. Create an XMLHTTP object – tells the web browser to get ready, you want to send an AJAX request and the browser needs to create an object that has all the methods needed to send and receive data.

2. Create a callback function – This is the programming you want to run when the server returns its response. The callback is where you process the return data, and update the HTML on the page. This is the heart of AJAX.

3. Open a request – here you give the browser two pieces of information, the method the browser will use to send the request (usually GET or POST), and the URL where the request is sent.

4. Send the request – The last three steps gave the browser everything it needs, so we can finally send the request.


A simply AJAX example

You can just use AJAX locally. You’ll need to set up a web server either locally or a normal one.

We start by writing JS. Step 1 – make XMLHTTP object – We declare a variable and set it to new XMLHttpRequest(). You need to do this for each request you want to send. So if you wanted to send two, you’d need two variables, each with their own XMLHttpRequest()’s.

Screen Shot 2014-10-10 at 1.29.47 PM

Step 2 – create a callback function –  This uses and event listener similar to what we saw before for mouseclicks, scrolling, keypresses etc, and is .onreadystatechange. It runs its function each time there is a change in the state of an AJAX request, which can be sending the request, receiving the response,  etc. The readyState property on the XMLHttpRequest() object holds a number 0-4 showing the current state of the request, and when it’s done, that number is 4. We then create an if block that reads true if the state is 4.

Then, we want to enter the html received by the server into a div, which we can do with document.getElementByID(‘ajax;) and set its innerHTML property, which contains all the HTML inside it, and by changing its value we change the html inside it. So, we’ll set that equal to xhr.responseText. Every XML HTTP request object has a property called response text, which is the information the server sends back. So, we’re taking that and setting it equal to the innerHTML, so it will become the div’s html.

Screen Shot 2014-10-10 at 1.39.56 PM

Remember, the programing won’t run until the response comes back from the server.

Step 3 – open a request – xhr (the variable we’re calling our XMLHTTP object) has a function called .open, which you give two pieces of information, the http method, and the url you want it to go to, which can be a file, etc. In the example below we’re getting the sidebar.html file.

Screen Shot 2014-10-10 at 1.45.58 PM

Step 4 – sending the request – here we use the send() function. Since we’re requesting info (GET), we don’t need to provide the function with anything, but if we were sending stuff (POST, PUT), we would need to.

Screen Shot 2014-10-10 at 1.47.00 PM

This isn’t very interactive though. Let’s make it so it loads upon clicking a button. First we’ll add the button to the markup, give it an id and set it’s onclick attribute to a function sendAJAX().

Screen Shot 2014-10-10 at 1.51.58 PM

Then we’ll create the function and make it so when the function runs it send the request, and also so that the button itself disappears. Note how the latter is different than jQuery, where you would just use .hide(). Here you need to select the display property and set it to “none”.

Screen Shot 2014-10-10 at 1.55.12 PM


GET and POST

Opening a request requires specifying the method you want to use to send the request. GET is used when you only need to receive info from a server. Use POST when you need to send info, like a reddit vote or an email sign up for a newsletter. When you go to a website, the browser actually uses a GET to get the web page.

However, usually things need to be dynamic and have you send and receive info, like when using google maps, you put in your address, it updates the map, etc. You can do this with GET and its url. The part after the question mark is called a query string. It lets you send additional info that the web server can use to control the output of its response. Commonly it’s used to search a database of info and return a single record or a small subset.

Screen Shot 2014-10-11 at 7.27.05 PM

Query strings are made up of one or more name/property value pairs. You separate them with ampersands (&).

Screen Shot 2014-10-11 at 7.28.57 PM

There are rules on what characters you can use. &, space, quotes and + have special meanings in a URL so if you want to use them you have to encode them, which translates them into a set of safe symbols that won’t conflict with their normal meaning.

Screen Shot 2014-10-11 at 7.31.20 PM

There are sites online to help you with this, like this one.

Screen Shot 2014-10-11 at 7.32.47 PM

Now, an issue with doing this is that all the info needs to be sent via the url, which is bad if it’s sensitive data. It’s not very secure as it will show up in the servers log files. Also, there is a char limit for urls in some browsers.

The POST method is better for sending large amounts of info. Rather than sending the info in the url like GET does, it puts it in the body of the request, separate from the url. It also requires a special header for the request, which is a special instruction to the server telling it what type of data to expect.


AJAX Response Formats

It can be a text message, like “OK”, or “Message Received”. Or it can be a static file, which is one just sitting on the server, like the bit of html we got in the practical example above.

But what if you get a lot of data? It’s good to have a structured format. This means it’s ordered consistently, has identifiers that indicate what the data is, and is easy for JS to analyze and use. The process of breaking a file up into easily accessed parts is called parsing. Two common formats are XML and JSON.

XML is extensible markup language, which apparently let’s you make up your own tags. That shit cray.

Screen Shot 2014-10-11 at 7.44.41 PM

However, XML is tough to use with JS, so we use JSON instead.


AJAX Security Limitations

It’s limited by the browsers same origin policy, which controls how JS can access content from a web server. In general, you can use AJAX to communicate from one page to another on the same web server, but not to access other web servers. If you try to request info from a different server than the one the site is hosted on, it’s another origin and it’s forbidden. Or, if yours is http and that one is https, it’s not allowed. You also can’t do one with a different port than yours. Or, one with a different host, meaning http://www.domain.com vs db.domain.com.

Screen Shot 2014-10-11 at 7.54.48 PM

But what if you want something on your site from a different one, like a google map or a tweet? There are a few ways to circumvent the same origin policy, like a web proxy. Web servers aren’t limited by the same origin policy, so you can have your server ask for info from another one using php or ruby.

Screen Shot 2014-10-11 at 7.57.18 PM

Another way is JSOPJSON with Padding, where you basically link to a JS file across another domain. An example is jQuery. Instead of actually using AJAX to contact another web server, you load a JS file from the other site.

Screen Shot 2014-10-11 at 8.01.13 PM

Finally there’s CORSCross Origin Resource Sharing, which is a W3C recommendation. It requires some set up on the server’s part, but it allows a server to accept requests from other domains. It also allows for more complex forms of authentication, requiring the web browser to supply credentials before the server will provide any info.

Screen Shot 2014-10-11 at 8.04.09 PM

Last limitation – AJAX won’t work unless you’re viewing the page via a web server.


Programming AJAX

This project will have you add a sidebar to your companies intranet that says whether an employee is in or out of the office.

AJAX Callbacks

Remember, the readyState property can be 0 to 4, with 0 being when the XMLHttp object has been created, with 3 being when the response is coming, and with 4 being the server has sent everything it’s going to send for the response. In our previous example, we set the callback function to run when the readyState was 4, but sometimes that’s not enough, something may have gone wrong. The web server can’t connect to the database, the web program handling the request crashes, or the AJAX pointed to a file that can’t be found. If any of these happen the browser won’t receive the response with the info needed.

So, we can expand the conditional statement by checking another property of the request object, the status property,which is a number sent from the server telling you about how things went.

Screen Shot 2014-10-12 at 3.19.41 PM

  • 200 means okay, and is the standard response for a successful http request
  • 404 is for file not found
  • 401 is not authorized to access a url due to a log in requirement or permission needed
  • 500 is when the server has an error, usually when its programming isn’t working.

So now nothing happens unless we get the response and the request is sent successfully. But, you can adjust it for if things go wrong.

Screen Shot 2014-10-12 at 3.22.42 PM

Accompanying the status object is the statusText, which is an explanation of the status. You can use this as part of the error message you display to the user. Here, we’ll use an else block to make it so that anytime you get something other than a 200 message, it gives an alert error message. To test this, we’ll change the .open to look for a file that’s not there.

Screen Shot 2014-10-12 at 3.25.50 PM

Screen Shot 2014-10-12 at 3.26.58 PM

In some cases, you won’t need any error message.


Introducing JSON

JSON stands for JavaScript Object Notation and is a way to use JS to pass info around. It uses basic JS objects and arrays to store data, and you can format it in two ways, using an array and/or object notation. An array is a comma separated list of values in square brackets. The problem with arrays is that you don’t know what the data means. Like what is the string for? Why is the third item true?

Screen Shot 2014-10-12 at 3.57.07 PM

An object is made up of key value pairs which fixes this. The key is the name of the property, and then you set its value. The key is separated from it’s value by a colon, and you separate the pairs with commas, except for the last one.

Screen Shot 2014-10-12 at 4.00.53 PM

While this look just like the objects we did with JS, there is an extra requirement for JSON formatted data. In regular JS, keys don’t have to be quoted, but in JSON they do and require double quotes. Also, strings require double quotes as well.

Now to get to work on the project. We’ll create an array, and then put objects into the array, since objects are just as valid as strings, numbers, etc for an array. JSON is picky, so if you mess up with the formatting, you’ll usually end up with a JS error. You can use an online validator to check your JSON, like this one. You won’t ever really have to write JSON by hand, it’ll usually be written programmatically by the web server.


Parsing JSON

Even though JSON is formatted to look like JS, it isn’t – it’s a plain text string, with no significance to your web browser. We need to take it and convert it into JS, a process known as parsing. All web browsers can do it using one command.

We’ll start by creating a XMLHttpRequest object, and then set up the callback function to run when the readyState property is at 4. Then we’ll do our steps 3 and 4 to open the request and then send it.

Now, let’s set up the actual code for the callback function that we want to run. We’ll get the responseText property of our xhr object, and set it in a console.log so we can see what it actually is saying. We then link our js file to our html one in the head, and we get this when we run the page.

Screen Shot 2014-10-12 at 4.26.45 PM

Screen Shot 2014-10-12 at 4.26.06 PM

In the console, you can see it loaded our file. It looks like JS, but it isn’t yet. We can check this using the typeof operator, which looks at the type of the thing list after it.

Screen Shot 2014-10-12 at 4.28.56 PM Screen Shot 2014-10-12 at 4.28.51 PM

To turn it into real JS, use the JSON.parse method, which takes a string and tries to convert it into a JS object. Remember, JSON is picky and this won’t work unless it’s formatted correctly. You’d get a JS error.

Screen Shot 2014-10-12 at 4.32.39 PM

To check this, let’s first see the type of element the employees variable is.

Screen Shot 2014-10-12 at 4.34.18 PM Screen Shot 2014-10-12 at 4.34.14 PM

Note – in JS arrays are considered a type of object. Next, let’s see whats inside the object.

Screen Shot 2014-10-12 at 4.35.56 PM Screen Shot 2014-10-12 at 4.35.48 PM


Processing JSON

Ok, we start by looking at the final html/css we’ll want. It’ll be a simple unordered list, and if they’re in, they get a class of in, and if they’re out they get a class of out. We’ll use the before and after pseudo-classes to display the icons. To build the html, we need to generate from the JSON one list item for each person in the company.

Screen Shot 2014-10-12 at 4.42.06 PM

Screen Shot 2014-10-12 at 4.43.17 PM

We’ll start by declaring a variable, and setting it equal to an opening ul tag. Next, we’ll build it up by adding more html to the variable, then eventually print it to our webpage.

Screen Shot 2014-10-12 at 4.45.52 PM

Now we’ll create a for loop to run through the list of employees. It starts by setting a counter variable, i, to zero. The second is a test condition which will determine how many times the loop runs for. As long as i is less than the length of the employees array, the loop with continue to run. Lastly, after each time the loop runs, 1 is added to the variable i.

In an array you use the index to access each value. Rather than type that in ourselves, we can use the counter variable i from the loop.

Screen Shot 2014-10-12 at 4.51.27 PM

To access properties in JS objects we use the dot syntax aka dot notation. Simply write the object, then a dot, then the property name. As i’s value changes, we’ll access different objects from the array.

Screen Shot 2014-10-12 at 4.53.23 PM

Screen Shot 2014-10-12 at 4.54.05 PM

Now, let’s start by checking if the employee is in the office with an if/else block, and add a opening tag list item with the appropriate class. The += operator in JS means take the current operator and add something to it. Next, we’ll add the name, and then close the tag. By the time the loop is done, it’s been filled with the list items. We can then add it to the div that’s already been set up to hold it.

Screen Shot 2014-10-12 at 6.20.10 PM Screen Shot 2014-10-12 at 6.19.59 PM


They had me do another challenge where we did basically the same thing only with whether rooms were taken. Note – with each new variable you declare for xhr objects, you need a new variable name.

Screen Shot 2014-10-12 at 6.38.10 PM Screen Shot 2014-10-12 at 6.37.26 PM