Using a REST API for the first time

by | Apr 12, 2017


Image source

Rest API’s; the big scary monster that I’ve put off using for a long time. I put off approaching API’s for so long they eventually approached me instead. In the project I am currently involved with there is a need for Rest API use and I had to face my fears. Needless to say, it was… fantastic! So much information and data, packaged so nicely and accessibly, I don’t know what I would’ve done without it. With the help of JQuery and JSON the use of a Rest API is actually really easy. If you are like I was and haven’t used a Rest API before, or have very limited experience with an API, this blog may be of use to you. If you are more confident with API’s or are curious to learn more, links to Tim Gray, and Sarah Dobie’s API blogs can be found below.
So what is it and how does it all work? API is short for Application Programming Interface. Simply put, programs need to talk with one another, and APIs are usually how they do this. API’s work at a high level by receiving a request and returning some data. In my case, the front-end of the app would send a request to the back-end for the details of the items I want to display. The back-end would process this request and, if authorised, would send back the data in a specified format (in my case it was JSON). I was then free to iterate through this data and do whatever I wanted with it. JSON returns data as objects which make accessing and grouping data very simple and straightforward. Instead of trying to explain how it works let have a look at an example.
Say we have a website that sells clothes and we want to display the t-shirts. First, we want to call the API that we want to use:
This is telling Ajax we want JSON data from the fictional URL ‘/api/clothing?style=tshirts’. We will have access to this JSON data inside the call-back function as the variable ‘data’. Rest API’s are usually accessed via a URL
[code language=”javascript”] $.getJSON(‘/api/clothes?tshirts’ , function (data) {
[/code] This will return something that looks like this:
[code language=”javascript”] [{
"Name": "My T-shirt",
"Category": tshirt,
"Color": "blue",
"Fit": "regular"
}, {
"Name": "My T-shirt",
"Category": tshirt,
"Color": "red",
"Fit": "slim"
}, {
"Name": "My T-shirt",
"Category": tshirt,
"Color": "blue",
"Fit": "loose"
}] [/code] So now I have all the data I need, I want to iterate through it. I can do this using a loop.
[code language=”javascript”] for(var i = 0; i < data.length; i++){
garmentName = data[i].name;
[/code] When we loop through each item, we will conveniently have access to each of its fields. From here we can create elements using the given data.
Although this is something very simple, it is very useful and something anyone interested in web development should be familiar with as it allows you to access and manipulate data cleanly and efficiently. Expanding from what I have mentioned above, you can PUT, POST, REQUEST, and DELETE. This means you can manipulate your data from a distance. So whether you are using an API for the first time because you want to, or because you have to, now you know it isn’t as scary or complex as it seems and it can be a very friendly and useful tool.
If this blog was a bit too simple, or you would like to check out more info about Application Programming Interfaces, have a look at our API other blogs,
Getting started with a web API – By Sarah Dobie
What’s the best RESTful web API framework – By Tim Gray
CORS proxy for REST APIs with AWS API gateway – By Tim Gray
From hard data to fluid design – Scott.
Scott blogs about how design can make data consumable and therefore valuable.
Want to read more? Try … Advanced Google queries or more from Scott.
We run regular business intelligence courses in both Wellington and Auckland.

Submit a Comment

Your email address will not be published. Required fields are marked *