API In Your Face! Part Deux

So last post we went over the fundamentals of APIs or Application Program Interfaces and how to make HTTP requests. If it was tl;dr as you cool kids say, don’t worry. Let’s start from scratch:

First thing you’re going to need is an API to interact with. For this post I’m going to use Google Books API but you can Google “Cool APIs for [insert year here] ,” and find all sorts of APIs to frustrate yourself with if this doesn’t tickle your fancy you picky bastard.

There are more than a few ways to access the data from an API but I’m going to use Jquery’s ajax method like a gentleman. In the head of your html page, include jquery to access it’s sweet ajax function  like so:

https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js

Sweet! Now how bout getting some of that data. From reading the sweet Google Docs I found this path to request information about a book by title and I’m going to insert it into my ajax method like so:

$.ajax({

url: “https://www.googleapis.com/books/v1/volumes?q=MobyDick”,
dataType: “json”,
success: function(data) {
console.log(data)

}

})

So what is this script doing? Well, the url is the path for our request which will return some JSON (JavaScript Object Notation) or objects back to us as is stated in the dataType attribute of the ajax method. Success executes a function on our data once data is returned and for right now, I’m just logging that output to my console to see what I’m working with.

If you run this in your browser, you aren’t going to see much because there’s nothing calling this ajax service from our home page. Let’s take care of that with a button:

<button onClick=”getBooks()”>AJAX ME</button>

In our js file let’s wrap that ajax service in the getBooks function like so:

function getBooks(){

$.ajax({

url: “https://www.googleapis.com/books/v1/volumes?q=MobyDick&#8221;,
dataType: “json”,
success: function(data) {
console.log(data)

}

})

}

Now you’re cooking with fire! Ok press that sweet html button and let’s see what you get in your console:

Screen Shot 2016-06-22 at 6.23.51 AM

Sweet! You returned an object with some data! Now click on that object and see what’s inside.

Screen Shot 2016-06-22 at 6.26.55 AM

In the 0 index or first item in the items array we see some info about the book “Moby Dick” from our http request. This info is pretty lame so let’s dig farther until we see something of use.

Screen Shot 2016-06-22 at 6.29.12 AM

That text snippet seems like something useful. Let’s grab it. To access the info from this data object that’s returned from our AJAX call we need to follow the path that led us there. In this case we were returned data as an object, went to items, and chose the first index (0) in the array and went to searchInfo and finally saw what we wanted at textSnippet. So the path to retrieve this info will be:

data.items[0].searchInfo.textSnippet

This is all great you’re undoubtedly saying but you probably want some way to incorporate this on your html page. The http request we made limits users to only searching for Moby Dick but let’s say you want them to be in control of their book finding destiny. While there are many ways to achieve this, I’ll show you one:

First let’s make an input:

<input id=”searchText” />

Sweet. Now when a user presses the button let’s add a script to get the value of the input and append it to our http request:

function getBooks(){

var searchText = document.getElementById(“searchText”).value

$.ajax({

url: “https://www.googleapis.com/books/v1/volumes?q=&#8221; + searchText,
dataType: “json”,
success: function(data) {
console.log(data)

}

})

}

Here we’ve grabbed the user’s input and placed it at the end of our http request so users can search for any book they enter.

With the data returned we can append it to our page by creating a div:

Now let’s add to our getBooks function:

var snippet = data.items[i].searchInfo.textSnippet

document.getElementById(“results”).innerHTML = “<p>”+ snippet +”</p>”

Now we have a page with a button that actually returns some pretty cool results.

You might think this is the cat’s meow (that’s what all the cool kids are saying these days) but what if a user enter’s a result with no results or what if you want more than just a text snippet? Hmmmmm. This is where StackOverflow and your powerful Google-Fu skills will serve you well.

If you have any problems with implementing this then go suck a lemon… or just email me at brianjenney83@gmail.com

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s