Lesson Weekend

Now that we have a general understanding of APIs, let's put them to use! In this lesson we'll walk through creating a request to retrieve data from an API.

Implementing an API

So. Our starter kit came with a page that includes a basic button that says "See Attendees". The code for this button looks like this:

index.html
...
       <button class="btn btn-lg btn-block" id="get-attendees-button">See Attendees!</button>
...

But nothing currently happens when we click our button. Let's change that. In Atom, let's open the file called retrieve-and-display-api-data.js. As the name implies, this is where we'll place code to automatically contact our API, retrieve information, and display it on our site.

Right now, the file includes only the following:

js/retrieve-and-display-api-data.js
$(document).ready(function() {



});

This code is jQuery. jQuery is a JavaScript library that makes web pages interactive. The code detailed above simply tells our program not to run any code until our website is actually loaded. (Or ready). So, code we place inside of this set of curly braces {} isn't allowed to run until after the page is fully loaded.

Let's add more to this file. We'll add code that will "listen" to our See Attendees button, so our program can tell when someone clicks it:

js/retrieve-and-display-api-data.js
$(document).ready(function() {
  $('#get-attendees-button').click(function() {


    // additional code will go here!


  });
});

By saying $('#get-attendees-button').click(function() { ... });, we're stating that any code placed inside here (where it says additional code will go here!) will only run after the page is loaded, and after the button with an id of get-attendees-button is clicked.

Great! Let's add more, so we can see something happen on our page when our button is clicked:

js/retrieve-and-display-api-data.js
$(document).ready(function() {
  $('#get-attendees-button').click(function() {
    $('#list-of-attendees').text("Hey, you clicked the button! In just a little bit, clicking this button will give you a list of attendees!"); 
    // additional code will go here later!
  });
});

This new line of code that begins with $('#list-of-attendees').text(... will insert text into the area of our page with an id of list-of-attendees. (Your starter kit's HTML already includes a div of this name).

Now, the index.html file in our starter kit is already "connected" to our code in the retrieve-and-display-api-data.js file, thanks to this line:

index.html
...
    <script src="js/retrieve-and-display-api-data.js"></script>
...

So, let's check it out! Return to the browser containing your website, and refresh the page. (Or, if you've exited that tab, revisit the URL localhost:3000). Then, click the See Attendees button. When you do this, text should appear, like this:

testing-click-listener

Awesome! This confirms our jQuery code is successfully running when the user clicks the button. Now that we know this is working, let's begin adding code to call the Act-W API when this button is clicked!

Creating an API Request

Now, inside the click handler, we're going to add in a call to the API using the jQuery method get. Update your file to look exactly like this. (Pay super careful attention to the location of the parenthesis and curly-brackets! Those are tricky):

js/retrieve-and-display-api-data.js
$(document).ready(function() {
  $('#get-attendees-button').click(function() {
    $.get('http://138.197.214.133/api/v1/attendee', function(response) {
      $('#list-of-attendees').text(response); 
      // additional code will go here later!
    });
  });
});

The jQuery get() method makes a request to the provided location. Let's discuss exactly what's happening here:

  • We say $.get('http://138.197.214.133/api/v1/attendee' ... to instruct our application to reach out to the resource located at this URL. This is where the Act-W API is located!

  • function(response) in the code above is a callback method. A callback is a function called only when something else happens - in this case, when the API has successfully returned a response. (But don't worry about these details if you aren't already familiar with callbacks. Just know that we're naming the data returned to our application from the API response.)

  • $('#list-of-attendees').text(response); then takes the response the API has provided, and inserts it into the list-of-attendees area of our page.

Let's take a look! Refresh your page in the browser, and click your See Attendees button again. This time, we should be greeted with a big tangled pile of data that looks like this:

unparsed-api-data-on-page

YOU JUST MADE YOUR FIRST SUCCESSFUL API CALL! So cool. Congrats. Isn't this crazy?!

Now, you may be thinking "But this is ugly and not a readable at all. It just lists [Object] a million times, and that's not helpful"... Aaaaaaand you'd be right. But don't worry! The page is just listing [Object], because our HTML site doesn't "understand" the returned data in its current format. We need to tweak it a little bit in order to display it correctly.

In the next lesson we'll walk through how to better manage and display this information in our site as we discuss parsing API responses.