Lesson Weekend

In the last lesson, we saw data returned from the API get plopped down right in the middle of our page, like this:

json-printed-to-page

But, it just says [Object, object] because the data isn't formatted in a manner the HTML page can correctly display. The data being returned from the API is in the JSON format. This is a standard format for API data. JSON stands for JavaScript Object Notation.

Thankfully, we can easily parse this data into a format our HTML page can display correctly.

Parsing JSON

In terms of programming, the word parse essentially just means to "pick apart". And that's exactly what we want to do: Pick apart this big mess of data, so we can display the parts we want in a nice format.

Right now, the code responsible for retrieving and displaying our API data is located in the retrieve-api-information.js file. It looks like this:

js/retrieve-api-information.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!
    });
  });
});

This is the specific line of code responsible for placing that big pile of tangled data directly on our webpage:

...
$('#list-of-attendees').text(response);
...

In order to make our page look nicer, let's parse that data before this line of code sticks it on our page. In order to decide how we might parse it, let's take a moment to observe the structure it's currently in. Take a peek at the data in our API again, by visiting this link.

It's a little tough to read, yes, but you should notice there are a few keywords that are continually repeated throughout the data. These are as follows:

  • _id
  • gender
  • job_category
  • ethnicity
  • age_range
  • _v

Each entry in the API represents an individual (anonymized) Act-W attendee. So, we have a gender, job_category, ethnicity and age_range information about each! (_v and _id are just pieces of info used internally by the API. Don't worry about these.)

So, we want to display the info that corresponds with each entry's gender, job_category_, ethnicity, and age_range categories.

Let's draft up an idea of how we'll want this to appear on our page. We probably want to format our list of attendees as ...well, a list, right? With each individual's (anonymized) details appearing as an entry in the list. Something like this:

example-parsed-data-entry

The HTML to create a list entry like those seen above would look something like this:

<div class="well attendee-entry">
  <b>Age Range: </b>AGE RANGE INFO HERE<br>
  <b>Job Category: </b>JOB CATEGORY INFO HERE<br>
  <b>Gender: </b>GENDER INFO HERE<br>
  <b>Ethnicity: </b>ETHNICITY INFO HERE<br>
</div>  

Now. We want to use this same HTML formatting for each attendee entry returned from our API, right? How do we do that?

Looping with JavaScript

With only a few lines of code, we can create a loop that will automatically make one of these HTML entries for each anonymized attendee returned from the API! Let's begin by changing code to our retrieve-api-information.js file to look like this:

js/retrieve-api-information.js
$(document).ready(function() {
  $('#get-attendees-button').click(function() {
    $.get('http://138.197.214.133/api/v1/attendee', function(response) {
      response.forEach(function(attendeeInformation){
        $('#list-of-attendees').append(
          // Code placed in here will run once for each entry in our API response! 
        );
      })
    });
  });
});

Here, we've removed the code that previously inserted badly-formatted data into our page, and added a loop.

When we say response.forEach(function(attendeeInformation ... we're creating a loop that will look at each individual entry in the API's response data. And, for each of these entries, it will execute whatever code is placed where the Code placed here will run once... place holder resides.

In our case, we want to create HTML entries that display each attendee's details. So, we'll place code to create an HTML entry right in the middle of that loop, like this:

js/retrieve-api-information.js
$(document).ready(function() {
  $('#get-attendees-button').click(function() {
    $.get('http://138.197.214.133/api/v1/attendee', function(response) {
      response.forEach(function(attendeeInformation){
        $('#list-of-attendees').append(
         '<div class="well attendee-entry">' +
           '<b>Age Range: </b>' + attendeeInformation.age_range + '<br>' +
           '<b>Job Category: </b>' + attendeeInformation.job_category + '<br>' +
           '<b>Gender: </b>' + attendeeInformation.gender + '<br>' +
           '<b>Ethnicity: </b>' + attendeeInformation.ethnicity + '<br>' +
         '</div>'
       );
      })
    });
  });
});

This will create a box for each attendee returned from the API, containing both their name, and their job category. Let's walk through the details:

  • response.forEach(function(attendeeInformation) {... Essentially states "Loop through each entry in the API response data. We'll give the entry you're currently looking at the nickname 'attendeeInformation'."

  • append is a method that adds to an area of an HTML web page. So, by stating $('#list-of-attendees').append, we're essentially saying "Hey, for each entry in that response list, add the following HTML"

  • There are + symbols throughout the HTML we're appending, because this allows us to combine JavaScript code (things like attendeeInformation.age_range) with basic HTML (things like <b>Age Range: </b>. This process is called concatenation.

  • When we call things like attendeeInformation.age_range in the code above, we're referencing the entry in the response that the loop is currently on, (Remember, we told the loop to give each entry the 'nickname' attendeeInformation), and fetching its age_range value to be displayed in the page.

After saving our changes, we should be able to refresh our page in the browser, and see the following:

completed-project

!!!!!!!!!!!!!!!!!!

Isn't this so cool!? You did it! Each and every one of those entries corresponds to an attendee at this very conference! And you wrote a program that automatically retrieves that information with a click of a button!

We're almost done! In the next lesson we'll debrief what we've learned, and curate some options for further exploration, if you'd like to develop your application further.