FBFC API Display

Create a simple table of fire-relevant information using just our Mesonet API

by Joe Young

HTML

<h2>
  Current conditions by GACC
</h2>
<label>Choose a GACC to show:
  <select class='js-choose-gacc'>
    <option value='NWCC' selected>Pacific Northwest (NWCC)</option>
    <option value='NOCC'>Northern California (NOCC)</option>
  </select>
</label>

<table class='js-mytable'>
  <thead>
    <tr>
      <th>STID</th>
      <th>ELEV</th>
      <th>TIME</th>
      <th>TEMP (F)</th>
      <th>RH (%)</th>
      <th>WSPD</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

CSS

table {
  border-left: 1px solid #555;
  border-top: 1px solid #555;
  border-collapse: collapse;
}

td,
th {
  border-right: 1px solid #555;
  border-bottom: 1px solid #555;
}

JavaScript

// set some variables to be used later
var myApiToken = "demotoken";

function showChosenGacc() {
  /*
   *	This function takes the GACC They picked, calls our API and fills in the table with the data
   */

  // we want to display the stations grouped by subGACC, so to do that we need to make a dictionary we can use to hold the stations, indexed with their sub-GACC
  var table_categories = {}
    // now get the region they selected
  var gacc = $(".js-choose-gacc").val()

  // use jQuery to call the API from the browser. Since it is a remote service we utilize a function called JSONP, which uses a callback argument to get the data to this function. There are other ways to make a request from the browser, such as CORS, which we do not support at this time. 

  // we can pass a JS object with our arguments to the API (except callback)

  var APIArguments = {
    token: myApiToken,
    gacc: gacc,
    within: 120,
    network: 2, // RAWS only
    complete: 1,
    timeformat: "%H%M %Z",
    obtimezone: 'local',
    units: "english"
  }
  $.getJSON("https://api.mesowest.net/v2/stations/latest?callback=?",
    APIArguments,
    function(apiData) {
      // this function is called once data are loaded
      // first make sure there are data!
      if (apiData.SUMMARY.RESPONSE_CODE != 1) {
        table.append("<tr><td colspan='6'>Sorry, no stations</td></tr>");
        return;
        // so we won't try to fill the table
      }
      for (s in apiData.STATION) {
        // now we are looping through returned stations
        var stn = apiData.STATION[s];
        if (stn.SGID in table_categories) {
          table_categories[stn.SGID].push(stn)
        } else {
          table_categories[stn.SGID] = [stn];
        }
      }
      // now call a function to actually write a table!
      writeTable(table_categories);
    })
}

function writeTable(sets) {
  // get the table
  var table = $(".js-mytable tbody");
  // empty it of rows
  table.empty();
  // organize the sets...