Alpha Vantage API GET Request

In an open source unlicensed world, how does one get open source (unlicensed) time series data??? [Alpha Vantage](https://www.alphavantage.co/). This POC demonstrates how to perform a GET request to the Alpha Vantage API.

HTML

<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/darkly/bootstrap.css">
<script>
  document.write('<a id="githubLink" href="https://github.com/bradyhouse/house/tree/master/fiddles/jquery/fiddle-0062-AlphaVantageAjax"' +
    ' target="_blank"><img style="z-index: 1000; position: absolute; top: 0; right: 0; border: 0;" ' +
    'src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" ' +
    'alt="Fork me on GitHub"><\/a>');

</script>
<div class="jumbotron">
  <form>
    <fieldset>
      <legend>AlphaVantage API - GET Request</legend>

      <div class="form-group">
        <label for="key">Authentication Key</label>
        <input type="text" class="form-control" id="key" aria-describedby="keyHelp" placeholder="Enter your AlphaVantage authentication key">
        <small id="keyHelp" class="form-text text-muted">Keys are free of charge and simply require sign-up on <a href="https://www.alphavantage.co/" target="_blank">https://www.alphavantage.co/</a>.</small>
      </div>
      <button type="button" id="request" class="btn btn-primary">request</button>
    </fieldset>
  </form>
  <hr class="my-4">
  <div id="fiddleHook">
  </div>
</div>

JavaScript

(function(app, $, undefined) {
  "use strict";

  app.prettify = function(json) {
    if (typeof json != 'string') {
      json = JSON.stringify(json, undefined, 2);
    }
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
      var cls = 'number';
      if (/^"/.test(match)) {
        if (/:$/.test(match)) {
          cls = 'key';
        } else {
          cls = 'string';
        }
      } else if (/true|false/.test(match)) {
        cls = 'boolean';
      } else if (/null/.test(match)) {
        cls = 'null';
      }
      return '<span class="' + cls + '">' + match + '</span>';
    });
  };

  app.request = function() {
    var key = document.getElementById('key').value;

    if (key && key !== undefined && key !== '') {
      var url = 'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=0787.HK&interval=1min&apikey=' +
        key,
        hook = document.getElementById('fiddleHook');

      hook.innerHTML = '<div class="progress">\n' +
        '  <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" ' +
        'aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>\n' +
        '</div>';

      jQuery.ajax({
        url: url,
        dataType: 'json',
        contentType: "application/json",
        success: function(data) {
          var p = document.createElement('p'),
            pre = document.createElement('pre');

          if (hook) {
            hook.innerHTML = '';
            p.innerHTML = url;
            pre.innerHTML = JSON.stringify(data, null, 2);
            pre.setAttribute('style', 'font-family: Courier; color: yellow;');
            p.setAttribute('style', 'font-family: Courier; color: white;');
            hook.appendChild(p);
            hook.appendChild(pre);
        ...