adamabernathy · June 14, 2017 22:07
diff --git a/latest.html b/latest.html
 <html>

 <body>
  <h2>Simple Latest Example</h2>
  <p>See the console for the full data response.</p>
  <hr/>
  <div id="result"></div>
 </body>

 <script>

  // State contains our variables to run this script.  Keep them here to make things easy on us.
  let state = {
    haveData: false,
    resultContainer: 'result',
    api: {
      baseURL: 'https://api.mesowest.net/v2/stations/latest?',
      args: {
        token: 'demotoken',
        timeformat: '%H:%M',
        obtimezone: 'local',
        county: 'san luis obispo',
        state: 'ca',
        within: '120'
      }
    }
  };
  
  let store = {};

  // Fetch some data from the API
  getDataFromAPI(state.api.baseURL, state.api.args, haveData);

  function haveData() {
    console.log(store.data);  // So you can inspect it
    
    // Little bit of error checking
    if (!state.haveData || store.data.SUMMARY.RESPONSE_MESSAGE !== 'OK') {
      document.getElementById(state.resultContainer).innerHTML = '<b>Rhut Rho!</b>';
      return;
    }	
    
    // Reguardless if you're using jQuery or something else, to handle the AJAX calls, the
    // following code works on our API data response. The punch line here is the handling the arrays vs. objects. 
    // To save on overhead and make the data response flexiable in multiple contexts, we only store the items that
    // depend on order as arrays and the rest are key/value pairs.

    let result = '';  // This is just so we can send something to the screen

    // Loop over the 'STATION' array.
    store.data.STATION.map((k) => {
      result += '<p>-- ' + k.NAME + ' --</p>';

      // 'OBSERVATIONS' in an object with a key/value pairs.  To make the looping work, just use the
      // `Object.keys()` method to loop over the keys as if they were an array.  At this point we can
      // combine multiple types of informaton together to make our quick display.
      Object.keys(k.OBSERVATIONS).map((kk) => {
        //        STATION[n] (STATION element from the loop above)
        //        |       Target the sensor name (kk)
        //        |       |      Sensor Name (key inside of OBSERVATIONS)
        //        |       |      |       Date time value
        //        |       |      |       |                                                 Observation value
        //        |       |      |       |                                                 |
        //        ▼       ▼      ▼       ▼                                                 ▼
        result += k.OBSERVATIONS[kk].date_time + ',  ' + kk + ',  ' + k.OBSERVATIONS[kk].value
          + ', ' + getUnits(kk)  + '<br/>';
        //             ▲
        //             |
        //             Just for fun, lets show the units too! This uses our date store.
      })
    });

    // Then just push this into the DOM tree.
    document.getElementById(state.resultContainer).innerHTML = result
  }

  function getUnits(sensor) {
    let unit = store.data.UNITS[sensor.split('_value')[0]];
    return typeof unit === 'undefined' ? '' : unit;
  }

  // 'serializeURLArgs' and 'getDataFromAPI' just go and get the data for us.
  // You can replace these with jQuery or an XHR request.
  function serializeURLArgs(obj) {
    let str = ['?'];
    for (let p in obj) {
      if (obj.hasOwnProperty(p)) { str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p])); }
    }
    return str.join('&');
  }

  function getDataFromAPI(baseURL = '', args = {}, callback) {
    state.api.requestURL = baseURL + serializeURLArgs(args);
    fetch(state.api.requestURL)
      .then((response) => { return response.json(); })
      .then((data) => {
        store.data = data;
        state.haveData = true;
        const callbackType = typeof callback;
        if (callbackType === 'function') { callback(data); }
        if (callbackType === 'object') { callback.map(function (k) { k(data); }); }
      });
  }

 </script>
	<html>

	<body>
	<h2>Simple Latest Example</h2>
	<p>See the console for the full data response.</p>
	<hr/>
	<div id="result"></div>
	</body>

	<script>

	// State contains our variables to run this script. Keep them here to make things easy on us.
	let state = {
	haveData: false,
	resultContainer: 'result',
	api: {
	baseURL: 'https://api.mesowest.net/v2/stations/latest?',
	args: {
	token: 'demotoken',
	timeformat: '%H:%M',
	obtimezone: 'local',
	county: 'san luis obispo',
	state: 'ca',
	within: '120'
	}
	}
	};

	let store = {};

	// Fetch some data from the API
	getDataFromAPI(state.api.baseURL, state.api.args, haveData);

	function haveData() {
	console.log(store.data); // So you can inspect it

	// Little bit of error checking
	if (!state.haveData \|\| store.data.SUMMARY.RESPONSE_MESSAGE !== 'OK') {
	document.getElementById(state.resultContainer).innerHTML = '<b>Rhut Rho!</b>';
	return;
	}

	// Reguardless if you're using jQuery or something else, to handle the AJAX calls, the
	// following code works on our API data response. The punch line here is the handling the arrays vs. objects.
	// To save on overhead and make the data response flexiable in multiple contexts, we only store the items that
	// depend on order as arrays and the rest are key/value pairs.

	let result = ''; // This is just so we can send something to the screen

	// Loop over the 'STATION' array.
	store.data.STATION.map((k) => {
	result += '<p>-- ' + k.NAME + ' --</p>';

	// 'OBSERVATIONS' in an object with a key/value pairs. To make the looping work, just use the
	// `Object.keys()` method to loop over the keys as if they were an array. At this point we can
	// combine multiple types of informaton together to make our quick display.
	Object.keys(k.OBSERVATIONS).map((kk) => {
	// STATION[n] (STATION element from the loop above)
	// \| Target the sensor name (kk)
	// \| \| Sensor Name (key inside of OBSERVATIONS)
	// \| \| \| Date time value
	// \| \| \| \| Observation value
	// \| \| \| \| \|
	// ▼ ▼ ▼ ▼ ▼
	result += k.OBSERVATIONS[kk].date_time + ', ' + kk + ', ' + k.OBSERVATIONS[kk].value
	+ ', ' + getUnits(kk) + '<br/>';
	// ▲
	// \|
	// Just for fun, lets show the units too! This uses our date store.
	})
	});

	// Then just push this into the DOM tree.
	document.getElementById(state.resultContainer).innerHTML = result
	}

	function getUnits(sensor) {
	let unit = store.data.UNITS[sensor.split('_value')[0]];
	return typeof unit === 'undefined' ? '' : unit;
	}

	// 'serializeURLArgs' and 'getDataFromAPI' just go and get the data for us.
	// You can replace these with jQuery or an XHR request.
	function serializeURLArgs(obj) {
	let str = ['?'];
	for (let p in obj) {
	if (obj.hasOwnProperty(p)) { str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p])); }
	}
	return str.join('&');
	}

	function getDataFromAPI(baseURL = '', args = {}, callback) {
	state.api.requestURL = baseURL + serializeURLArgs(args);
	fetch(state.api.requestURL)
	.then((response) => { return response.json(); })
	.then((data) => {
	store.data = data;
	state.haveData = true;
	const callbackType = typeof callback;
	if (callbackType === 'function') { callback(data); }
	if (callbackType === 'object') { callback.map(function (k) { k(data); }); }
	});
	}

	</script>
No results found