JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Hospitals</h1>
<form>
<label>Zip code:</label><input type="text">
<input class="form-submit" type="submit" value="Geocode me!">
</form>
<div id="hospitals"></div>
CSS
.hospital {
margin: 0 0 1em;
}
JavaScript
$(document).ready(function() {
var hcafeed = 'https://hcafeeds.medcity.net/rss/er/ntx_rss_feed.xml';
var yql = 'https://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from rss where url="' + hcafeed + '"') + '&format=json&diagnostics=true&callback=?';
output_hospitals();
function output_hospitals() {
$.getJSON(yql,function(data) {
if(data.query.count > 0) {
// Run through hospitals and set html
var hospitals = [];
$.each( data.query.results.item, function( key, val ) {
var hospitalAddress = val.address;
var wait = $.trim(val.description.replace("Mins",""));
var units = (wait == 1) ? " Min" : " Mins";
// At this point I need to run a distance matrix call or something and inject it into the "hospitals" array below.
hospitals.push({
'name' : "<div class='name'>"+val.comments.replace(" ER Wait Time","")+"</div>",
'addy' : "<div class='addy'>"+val.address+"</div>",
'phone' : "<div class='phone'>"+val.phone+"</div>",
'waitOutput' : "<div class='wait'>"+wait+units+"</div>",
'wait' : wait,
'distanceOutput' : "<div class='distance'></div>",
});
});
// Sort array by wait time (default)
hospitals.sort(function(a, b){
return a.wait-b.wait;
});
// Prepare array for output (wrapper)
var output = [];
$.each( hospitals, function( key, val ) {
output.push("<div data-key='"+key+"' data-wait='"+val.wait+"' class='hospital'>"+val.name+val.addy+val.phone+val.waitOutput+val.distanceOutput+"</div>");
});
}
// Print array
$("#hospitals").html( output );
}).fail(function (j, t, e) {
console.error(e);
});
};
// Geocode address
function...