JSFiddle - React, Tailwind, and code Playground

by Chris Henrick

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class="data-container"></ul>

JavaScript

// Demo of the module pattern loose augmentation

// this module fetches data asyncronously
var app = (function(parent, w, d, $) {
  parent.getData = function(callback) {
    dataURL = 'https://chenrick.carto.com:443/api/v2/sql?q=select address from public.map_pluto_likely_rs_2016v1 limit 10';
    $.getJSON(dataURL, function(data) {
      // you could store it here and then act on it later, but...
      parent.data = data;
      // problem is that app.getData is async, so it's generally
      // a better practice to
      // use a callback which gets passed the response
      if (callback && typeof callback === 'function') {
        callback(data);
      } else {
        console.warn('getData requires a callback function as a param!');
      }
    });
  }
  return parent;
})(app || {}, window, document, jQuery);


// this module writes data to the DOM
var app = (function(parent, $) {
  parent.writeData = function(data) {
    data.rows.forEach(function(row) {
      $('.data-container').append('<li>' + row.address + '</li>')
    });
  }
  return parent;
})(app || {}, jQuery);


// contains `init` which invokes our app
var app = (function(parent, $) {
  parent.init = function() {
    parent.getData(parent.writeData);
  }
  return parent;
})(app || {});

// invoke init on our app
app.init();