Basic_Sightings (more gourmet)

Most next-to-most basic conceivable method for retrieving and displaying recent sightings API data, just more user friendly.

by Zach DeBruine

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="content">Loading...</div>

CSS

a {text-decoration:none;}

JavaScript

// request eBird API as JSON document
var URL = "http://ebird.org/ws1.1/data/obs/geo/recent?lng=-76.51&lat=42.46&dist=5&back=30&locale=en_US&fmt=json";

// load API contents into document in JavaScript object called "data", then call function called process();
$.getJSON(URL, function (data) {
    for (var i = 0; i < data.length; i++) {
        // First, change date from form yyyy-mm-dd hh:mm to mm/dd
        data[i].obsDt = data[i].obsDt.substring(5, 7) + "/" + data[i].obsDt.substring(8, 10);

        // Next, merge lat-lng coordinates into a hyperlink to Google Maps in location and, if location is a hotspot, make location text red, otherwise make it black
        if (data[i].locationPrivate == false) {
            data[i].locName = "<a href='http://www.google.com/maps/place/" + data[i].lat + "," + data[i].lng + "' style='color:red;'>" + data[i].locName + "</a>";
        } else {
            data[i].locName = "<a href='http://www.google.com/maps/place/" + data[i].lat + "," + data[i].lng + "' style='color:black;'>" + data[i].locName + "</a>";
        }

        // Finally, if observation count is undefined, then replace with "X"
        if ("howMany" in data[i]) {} else {
            data[i]["howMany"] = "X";
        }
    }

    // append contents to an html string and add to element of interest
    var html = "<table><tr><th>Count</th><th>Species</th><th>Location</th><th>Date</th></tr>";
    for (var i = 0; i < data.length; i++) {
        html += "<tr>";
        html += "<td>" + data[i].howMany + "</td>";
        html += "<td>" + data[i].comName + "</td>";
        html += "<td>" + data[i].locName + "</td>";
        html += "<td>" + data[i].obsDt + "</td>";
        html += "</tr>";
    }
    html += "</table>";
    $("#content").html(html);
});