Metro Example

ARJUNE GUNASEKARAN

by Alex Azuero

HTML

<!-- this list should have a list of stations as provided by the WAMATA API -->
<select id="stations">
    <option value="" disabled selected>Select a station</option>
</select>
<!-- This should contain the station predictions for the selected station and should update every 15 seconds with new data. Do not refresh the page. -->
<div id="status">
    <!-- Line - Direction - Time -->
</div>

CSS

div#status p {
    margin: 5px, 0;
}

#status span {
    font-weight: bold;
}

JavaScript

//EX - http://json2jsonp.herokuapp.com/url/http%3A%2F%2Fwww.reddit.com%2F.json 


//Wamata API - http://developer.wmata.com/io-docs 
$(document).ready(function () {
    var apiKey = '11070c26c3224c15bfef321427708beb';
    var j2j = 'http://json2jsonp.herokuapp.com/url/'; //This expects an encoded url.
    var uri1 = j2j + encodeURIComponent('http://api.wmata.com/Rail.svc/json/jStations?api_key=' + apiKey) + '&callback=?',
        select = $("#stations"),
        div = $("#status");

    $.getJSON(uri1, function (response) {
        if (response['Stations'] && response['Stations'].length > 0) {
            $.each(response['Stations'], function (i, item) {
                select.append(new Option(item['Name'], item['Code']));
            })
        };
    });

    select.change(function () {
        var code = $(this).find(':selected').val(),
            uri2 = j2j + encodeURIComponent('http://api.wmata.com/StationPrediction.svc/json/GetPrediction/' + code + '?api_key=' + apiKey) + '&callback=?';
        $.getJSON(uri2, function (response) {
            if (response['Trains'] && response['Trains'].length > 0) {
                $.each(response['Trains'], function (i, item) {
                    console.log(item);
                    div.append("<p><span>Line: </span>" + item['Line'] + ", <span>Destination Name: </span>" + item['DestinationName'] + "<span>Minutes: </span></p>" + item['Min']);
                });
            }
        });
    });
});