CodePen Embed - WMATA API usage example

<div id="wrapr">
  <div id="contnr">
    <div id="trains">
      <div id="nxt_hdr">
        <did id="logo_plcholdr"></did>
        <div id="time_stmp"></div>
      </div>

      <div class="row toprow">
        <div class="col topcol col1">Line</div>
        <div class="col topcol col2">Cars</div>
        <div class="col topcol ctntcol_lft col3">Destination</div>
        <div class="col topcol col4">Minutes</div>

        <div class="col col5">&nbsp;</div>

        <div class="col topcol col6">Line</div>
        <div class="col topcol col7">Cars</div>
        <div class="col topcol ctntcol_lft col8">Destination</div>
        <div class="col topcol col9">Minutes</div>
      </div>

      <div class="row">

        <div id="t1_line" class="col ctntcol col1">--</div>
        <div id="t1_cars" class="col ctntcol col2">-</div>
        <div id="t1_dest" class="col ctntcol ctntcol_lft col3">-</div>
        <div id="t1_min" class="col ctntcol col4">-</div>

        <div class="col ctntcol col5">&nbsp;</div>

        <div id="t2_line" class="col ctntcol col6">--</div>
        <div id="t2_cars" class="col ctntcol col7">-</div>
        <div id="t2_dest" class="col ctntcol ctntcol_lft col8">-</div>
        <div id="t2_min" class="col ctntcol col9">-</div>
      </div>

      <div class="row">
        <div id="t3_line" class="col ctntcol col1">--</div>
        <div id="t3_cars" class="col ctntcol col2">-</div>
        <div id="t3_dest" class="col ctntcol ctntcol_lft col3">-</div>
        <div id="t3_min" class="col ctntcol col4">-</div>

        <div class="col ctntcol col5">&nbsp;</div>

        <div id="t4_line" class="col ctntcol col6">--</div>
        <div id="t4_cars" class="col ctntcol col7">-</div>
        <div id="t4_dest" class="col ctntcol ctntcol_lft col8">-</div>
        <div id="t4_min" class="col ctntcol col9">-</div>
      </div>

      <div class="row">

        <div id="t5_line" class="col ctntcol col1">--</div>
        <div id="t5_cars" class="col ctntcol col2">-</div>
        <div id="t5_dest" class="col ctntcol ctntcol_lft col3">-</div>
        <div id="t5_min" class="col ctntcol col4">-</div>

        <div class="col ctntcol col5">&nbsp;</div>

        <div id="t6_line" class="col ctntcol col6">--</div>
        <div id="t6_cars" class="col ctntcol col7">-</div>
        <div id="t6_dest" class="col ctntcol ctntcol_lft col8">-</div>
        <div id="t6_min" class="col ctntcol col9">-</div>
      </div>

      <div class="row toprow toprow2">
        <div class="col topcol col1">Line</div>
        <div class="col topcol col2">Cars</div>
        <div class="col topcol ctntcol_lft col3">Destination</div>
        <div class="col topcol col4">Minutes</div>

        <div class="col col5">&nbsp;</div>

        <div class="col topcol col6">Line</div>
        <div class="col topcol col7">Cars</div>
        <div class="col topcol ctntcol_lft col8">Destination</div>
        <div class="col topcol col9">Minutes</div>
      </div>

      <div class="row">

        <div id="t7_line" class="col ctntcol col1">--</div>
        <div id="t7_cars" class="col ctntcol col2">-</div>
        <div id="t7_dest" class="col ctntcol ctntcol_lft col3">-</div>
        <div id="t7_min" class="col ctntcol col4">-</div>

        <div class="col ctntcol col5">&nbsp;</div>

        <div id="t8_line" class="col ctntcol col6">--</div>
        <div id="t8_cars" class="col ctntcol col7">-</div>
        <div id="t8_dest" class="col ctntcol ctntcol_lft col8">-</div>
        <div id="t8_min" class="col ctntcol col9">--</div>
      </div>

      <div class="row">

        <div id="t9_line" class="col ctntcol col1">--</div>
        <div id="t9_cars" class="col ctntcol col2">-</div>
        <div id="t9_dest" class="col ctntcol ctntcol_lft col3">-</div>
        <div id="t9_min" class="col ctntcol col4">-</div>

        <div class="col ctntcol col5">&nbsp;</div>

        <div id="t10_line" class="col ctntcol col6">--</div>
        <div id="t10_cars" class="col ctntcol col7">-</div>
        <div id="t10_dest" class="col ctntcol ctntcol_lft col8">-</div>
        <div id="t10_min" class="col ctntcol col9">-</div>
      </div>

      <div class="row">

        <div id="t11_line" class="col ctntcol col1">--</div>
        <div id="t11_cars" class="col ctntcol col2">-</div>
        <div id="t11_dest" class="col ctntcol ctntcol_lft col3">-</div>
        <div id="t11_min" class="col ctntcol col4">-</div>

        <div class="col ctntcol col5">&nbsp;</div>

        <div id="t12_line" class="col ctntcol col6">--</div>
        <div id="t12_cars" class="col ctntcol col7">-</div>
        <div id="t12_dest" class="col ctntcol ctntcol_lft col8">-</div>
        <div id="t12_min" class="col ctntcol col9">-</div>
      </div>

    </div>


  </div>
</div>

body {
  font-family: helvetica, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0;
  background-color: #708090;
  font-family: none-serif;
  font-size: 14px;
  color: #ffffff;
}

#wrapr {
  display: block;
}

#contnr {
  display: block;
  width: 636px;
  margin: 0 auto;
}

#logo {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  margin-bottom: 80px;
}

#logoimg {
  display: block;
  margin: 0 auto;
  width: 199px;
  height: 65px;
}

#trains {
  display: flex;
  flex-direction: column;
  height: 510px;
  background-color: #e7e7e8;
}

#nxt_hdr {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 31px 0 36px;
}

#logo_plcholdr {
  margin-top: 10px;
  width: 70%;
  color: #000000;
  font-family: gotham, helvetica, sans-serif;  
}

#metro_hdr {
  display: block;
  width: 566px;
  height: 100px;
}

#time_stmp {
  margin-top: 20px;
  width: 30%;
  color: #000000;
  font-family: gotham, helvetica, sans-serif;
}

.row {
  display: flex;
  flex-direction: row;
  padding-left: 20px;
  padding-right: 20px;
  width: 595px;
}

.line_img {
  width: 34px;
  height: 34px;
}

.toprow {
  margin-top: 22px;
  font-weight: bold;
  font-size: 17px;
}

.toprow2 {
  margin-top: 32px;
}

.col {
  font-family: gotham, helvetica, sans-serif;
  font-size: 14px;
  color: #000000;
  font-weight: 500;
}

.topcol {
  font-size: 15px;
  text-align: center;
  border-bottom: 1px solid black;
}

.col1 {
  width: 60px;
}

.col2 {
  width: 65px;
}

.col3 {
  width: 201px;
}

.col4 {
  width: 92px;
}

.col5 {
  width: 52px;
}

.col6 {
  width: 60px;
}

.col7 {
  width: 65px;
}

.col8 {
  width: 201px;
}

.col9 {
  width: 92px;
}

.ctntcol {
  margin-top: 10px;
  text-align: center;
  vertical-align: middle;
  line-height: 25px;
  /* 30px; */
}

.ctntcol_lft {
  text-align: left;
}

var trainLineColrs = {
  'RD': {
    c1: '#t1', 
    c2: '#t3',
    c3: '#t5',
    c4: '#t7',
    c5: '#t9',
    c6: '#t11'
  },
  'OR': {
    c1: '#t2',
    c2: '#t4',
    c3: '#t6',
    c4: '#t8',
    c5: '#t10',
    c6: '#t12'
  },
  'SV': {
    c1: '#t2',
    c2: '#t4',
    c3: '#t6',
    c4: '#t8',
    c5: '#t10',
    c6: '#t12'
  },
  'BL': {
    c1: '#t2',
    c2: '#t4',
    c3: '#t6',
    c4: '#t8',
    c5: '#t10',
    c6: '#t12'
  }
}

var params = {
  "api_key": "965b2f67c1d34fdca93615c17e72d6d8"
};

function fill_train_row(c, line, dest, car, min) {
  $(c+'_line').html('<img class="line_img" src="https://timshaya.files.wordpress.com/2016/10/lines_'+line.toLowerCase()+'.png" />');   
  $(c + '_dest').html(dest);
  $(c + '_cars').html(car);
  $(c + '_min').html('<strong>' + min + '</strong>');
}

function get_trains() {
  //A01, C01: stations codes for Metro Center station
  $.ajax({
      url: "https://api.wmata.com/StationPrediction.svc/json/GetPrediction/A01, C01?" + $.param(params),
      type: "GET"
    })
    .done(function(data) { //jquery 1.9  

      console.log("get_trains() done !!!");

      var $shedjul = $.parseJSON(JSON.stringify(data));

      //clear all cells of previous data
      $.each($shedjul.Trains, function(i, val) {
        $('#t' + (i + 1) + '_line').html("--");
        $('#t' + (i + 1) + '_dest').html("-");
        $('#t' + (i + 1) + '_cars').html("-");
        $('#t' + (i + 1) + '_min').html("-");
      });

      //loop through 12 train results 
      $.each($shedjul.Trains, function(i, val) {
        switch (val.Line) {
          case "--":
            $('#t' + (i + 1) + '_line').html(val.Line);
            if (val.DestinationName == "Train")
              $('#t' + (i + 1) + '_dest').html(val.DestinationName);
            $('#t' + (i + 1) + '_min').html(val.Min);
            break;
          case "-":
            $('#t' + (i + 1) + '_line').html(val.Line);
            if (val.DestinationName == "Train") $('#t' + (i + 1) + '_line').html(val.DestinationName);
            break;
          case "No":
            $('#t' + (i + 1) + '_line').html('No');
            break;
          default:
            var cel = chk_line(val.Line, val.Group);
            fill_train_row(cel, val.Line, val.DestinationName, val.Car, val.Min);
        }
      });

      get_time_stmp();
    })
    .fail(function() {
      console.log("There's a data request error......");
    });
};

/*TO DO: clean this up: */
function chk_line(lan, grp) {
  if (grp == 1) {
    //#t1_line, t3_line, t5_line                  
    if ($(trainLineColrs[lan].c1 + '_line').is(':contains("--")')) {
      var the_cell = trainLineColrs[lan].c1; /*var the_cell = '#t1';*/
    } else if ($(trainLineColrs[lan].c2 + '_line').is(':contains("--")')) {
      var the_cell = trainLineColrs[lan].c2;
    } else if ($(trainLineColrs[lan].c3 + '_line').is(':contains("--")')) {
      var the_cell = trainLineColrs[lan].c3;
    }

  } else if (grp == 2) {

    //#t7_line, t9_line, t11_line                  
    if ($(trainLineColrs[lan].c4 + '_line').is(':contains("--")')) {
      var the_cell = trainLineColrs[lan].c4;
    } else if ($(trainLineColrs[lan].c5 + '_line').is(':contains("--")')) {
      var the_cell = trainLineColrs[lan].c5;
    } else if ($(trainLineColrs[lan].c6 + '_line').is(':contains("--")')) {
      var the_cell = trainLineColrs[lan].c6;
    }
  }

  return the_cell;
}

function get_time_stmp() {
  var m = new Date().getMinutes();
  var h = new Date().getHours();
  var s = new Date().getSeconds();

  //convert to 12 hour clock
  if (h > 12) {
    h = (h - 12);
    am = "PM";
  } else if (h == 12) {
    am = "PM";
  } else {
    am = "AM";
  }

  var t = (h < 10 ? "0" : "") + h + ":" + (m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s + am;

  $("#logo_plcholdr").html('Last Data Update: ' + t + ' EDT <br /> Data will refresh every 5 seconds');
}

$(document).ready(function() {
  get_trains();
  setInterval(function() {
    get_trains();
  }, 5000);
});

Run Pen

This Pen is owned by Tim Shaya on CodePen.

See more by @timshaya on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js