3.2 Metro Web – Using jQuery to display route data

Now we are ready to use jQuery function calls to grab data from Metro. Let’s put mapping aside for now. What we want to do is display a list of all available bus lines in the side panel. According to Metro’s documentation, you can access the routes by making a call to:

http://api.metro.net/agencies/lametro/routes/

jQuery has a function called .getJSON that let’s us grab external data from an API feed that allows for JSON and JSONP requests. Let’s create a function that gets the bus routes. Make sure to replace the namespace (“up206b“) with your own namespace. ¬†Add the following function to your code, below the initialize function.

All jQuery functions begin with the dollar ($) sign. In this case,

$.getJSON(url, callback function);

We have populated the url parameter with the call to the Metro API. Notice also that the url has been appended with “callback=?“. This is necessary because this is what makes jQuery recognize the request as a JSONP request (read more details here).

The second part of .getJSON is the callback function. This is done by creating a function call like this:

function(data) { do something }

“data” is a variable that “holds” the results that came from the URL provided, so in this case, it holds the data that was retrieved from Metro, in JSON format.

For now, let’s see what happens when we “trace” the data.

Copy and paste the code above to your maproom (again, making sure to modify the namespace). Make sure to put it in the “global” space of your javascript code and not within another function.

Then, inside the “initialize” function, add a call to the getBusRoutes function.

(sample code)

Tracing the data

Access your maproom using Chrome, and turn on the development tools. Click on the console window. You should see an entry that says “object“. Expand that list to see what’s inside by clicking on the little triangle to the left of ‘object.’ You will have to expand the list for the ‘item’ tag as well.


object in the console window

object in the console window

In this example, you will notice that there are 176 “items” (as of April, 2012), and each item has a “display_name” and an “id“. Each “item” is a Metro bus route, and each “display_name” is the name of the route. The “id” refers to the bus number. This is how the data is arranged:

  • object -> item (array) -> display_name
  • object -> item (array) -> id

Displaying the data

Now that we have successfully “traced” the data, let’s display it in our side panel. jQuery has another useful function called .each that lets you loop through an array and perform an action on individual items.

The jQuery call for .each says to loop through every “data.items” object (which we know there are 176 of), and then perform a function on each object. The function call “function(i,item)” has two parameters:

  • “i” is the number in the array, starting from “0” (zero)
  • “item” is the object that holds the data values, in this case “display_name” and “id”

By adding a trace for each “item.display_name”, we should get a list of all the stops in our console window.

list of stops in console

list of stops in console

(sample code)

Now all we have to do is display the data in our sidebar instead of the console window. First, we need to create a DIV element to put the stops in. Add the following div as shown in line 4 to the side panel div container in your body tag. Notice that we are giving the DIV a unique “id” value of “stoplist”.

Now we can use jQuery’s append function to add text to this DIV. All jQuery functions begin with the dollar ($) sign. jQuery functions can be applied to elements on a web page by “calling” them by their ID values. For example, you can call the “stoplist” DIV using this jQuery syntax:

$(‘#stoplist’).{some jQuery function};

Notice that the pound sign (#) in front of the word “stoplist” symbolizes that you are “calling” for an element’s ID value. Using this syntax, let’s append some text to the “stoplist” div. Notice that we are also tacking on a “<br>” (line break) at the end of each item.

Hurray! You should now see an (endless) list of all the bus routes Metro offers in your side panel.

routes

routes

(sample code)

Since the list of the route names is too long, let’s opt to clean this up a bit. Instead of displaying the full name of the route, let’s just display the route number. Do so by changing the content within the append() function: instead of showing “item.display_name“, show “item.id” (which is the route number). You would then have to concatenate a space (” “) (instead of the <br>) in order to make sure that the route numbers are separated in the display.

Leave a Reply