Metro Example

Ksenia Coulter

by Alex Azuero

HTML

<select class="form-control" id="stations"> 
    <option value="" disabled selected>Select a station</option>
</select>

<!-- This div should contain a live updating copy of the selected station -->
<table class="table table-striped" id="status"> 
</table>

JavaScript

var apiKey = 'cq2aqk86k8jsdfafqjkaa7d4';
var stations = 'https://api.wmata.com/Rail.svc/json/jStations?api_key='+apiKey;
 // populate the select

//when a user selects a station get the station prediections.
	//var status = 'https://api.wmata.com/StationPrediction.svc/json/GetPrediction/'+station+'?api_key='+apiKey;
$.ajax({
	url: stations
}).done(function(data) {
			var dropdownBlock = '';
      for(var i=0; i<data.Stations.length; i++){
        	dropdownBlock += '<option value="'+ data.Stations[i].Code +'">'+ data.Stations[i].Name + '</option>'
      }
      $('#stations').append(dropdownBlock)
  })
  .fail(function() {
      alert("error");
  });
  
  $('#stations').change(function(){
  	$('#status').empty();
  	var stationCode = $(this).val();
    $.ajax({
    	url: 'https://api.wmata.com/StationPrediction.svc/json/GetPrediction/'+stationCode+'?api_key='+apiKey
    }).done(function(data){
    	console.log(data.Trains)
    	for(var i=0; i<data.Trains.length; i++){
      	$('#status').append(
        	'<tr>'+
          	'<td>'+ data.Trains[i].Destination +'</td>' +
            '<td>'+ data.Trains[i].Min +'</td>' +
           '</tr>'
        )
      }
    })
  })

//use set interval to update arival times.