Bring in some free APIs

apiImg2

As I am learning to be a better developer (crossing fingers) I wanted to share some of the code that I have been working on. Also it’ll make it easier for me to find it if or when, I need it again.

In this case I had decided to experiment with bringing content in from outside APIs.

There are many outstanding sources of data from various APIs that are free and available to anyone who is interested. And keep in mind not just as in free in a financial sense but also in free as in freedom of thought, information and speech. So go out, educate, share!

The ones I used in these two examples are from ipiinfo and the Sunlight Foundation.

the code below is reliant on javascript and jQuery

In the index.php page I had very little (of course you can also use an .html page), just the basics as I wanted to practice creating the divs and elements by way of javascript and jQuery.

Simply put, I created the “wrap” div in the index.php, then in the .js the variable

   var divsToAppend = "";

was declared. A for loop was used to create three empty divs and the counter was used to add a numerical identifier to their IDs and jquery helped with .addClass() so that I added the appropriate classes to the divs.

for (i = 0; i<3; i++) {
   divsToAppend += '';
}
$('#wrap').append(divsToAppend);


Ok so far so good.

Although a more elegant bit of code was provided by Megazoid from the outstading forum on sitepoint.  And his snippet looks way better. See for yourself:

for (i = 0; i <; 3; i++) {
    $('#wrap').append('</div>').attr('id', 'div'+i);
}


So…use that one instead.

 

Using the same technique I then added sub divs to the original divs and some content:

$(document).ready(function(){
 var divsToAppend = "";
 var contentDivs = "";
 var subDivs ="";
 
 //creating divs and appending content
 for (i = 0; i < 3; i++) {
 divsToAppend += '<div id="div' + (i) + '" />'; 
 }
 $('#wrap').append(divsToAppend);
 $("#div0").addClass("hdr").html("<h1>headah</h1>");
 $("#div1").addClass("content").html("<p>Whatevah</P>"); 
 $("#div2").addClass("ftr").html("<h3>Footah</h3>")

 for (i = 0; i < 3; i++) {
 contentDivs += '<div id="ct' + (i) + '" />'; // Etcetera. Etcetera, etcetera.
 }

Next, onward to the Sunlight foundation you can get a free ( a very good deal) the api key that will allow you to bring in the data they offer. On their API page you’ll see the API available list. Video training, tools, etc…So once you got your free key you can try it with the code below.

This first example was done after following an online tutorial. It used a .each() loop, a jQuery function.

$("#senators").submit(function(e){
e.preventDefault();
var $results = $("#senator-results");
var zipcode = $("#txt-zip").val();
var apiKey = "*****"; //the api you got, a long series of letters and numbers goes there in place of all the neat *
var requestURL = "https://congress.api.sunlightfoundation.com/legislators/locate?callback=?";//collect data
$.getJSON(requestURL,{
'apikey' : apiKey,
'zip' : zipcode
},function(data){
 if(data.results && data.results.length > 0){
 var senators = "<p> Here you go: </p>";
 $.each(data.results, function(i, rep){
 if('senate'=== rep.chamber.toLowerCase()){
 senators += '<p>';
 senators += '<a href="' +rep.contact_form+ '" target="_blank">';
 senators += rep.first_name +' '+ rep.last_name;
 senators += '</a>';
 senators += '</p>';
 }
 });
 senators += '<p> Write em</p>';
 $results.html(senators);
 $('#subSect0').append($results.html(senators));
 }else{
 $results.html('<p> none found for' +zipcode+ '</p>');
 }
 });
 //$('#subSect0').append($results.html(senators));
});

And this is another request. But with a simple .get() and the .each() loop exchange to a for loop. Why? Mostly just for practice.

$.get("https://congress.api.sunlightfoundation.com/bills?apikey=***", function (response) {
 //console.log(response);
 var i=0;
 var html = '';
 for(i=0; i<response.results.length; i++){
 console.log(objList);
 var objList = response.results[i];
 html += '<div class=\" billList\">'
 html += objList.bill_id + '<br />';
 html += objList.chamber + '<br />';
 html += objList.official_title + '<br />';
 html += '</div>'
 $("#ct0").append(html);
 }
}, "jsonp");

And…one last api for this post. The very friendly and neat ipiinfo. No API key needed. This great little API will get you the City, co-ordinates, zip code, etc…

$.get("http://ipinfo.io", function (response) {
$("#ip").html("IP: " + response.ip);
$("#address").html("Location: " + response.city + ", " + response.region + ", " + response.loc);
$("#details").html(JSON.stringify(response, null, 3));
$("#geoLoc").css({
"background-color":"#066",
"color":"#fff",
"font-family":"sans-serif",
"font-size":"14px",
"text-transform":"uppercase" });
}, "jsonp");

And here are the links to jQuery methods mentioned in the post.
.getJSON() .get() .each()

Leave a Reply