Accessing APIs on Your Website

What is it?

An API or Application Programming Interface is something that a website or online service designs to make some of their data available to the public, for use in applications or other purposes. In this lesson, you will gain experience using JavaScript to provide data to a website via an Application Programming Interface (API).

Why should I learn it?

There are valuable sources of information all over the Web. You should learn how to access items in realtime manner.

What can I do with it?

Your web pages can access information from other sources and be updated.

How long will it take?

Programming is something that you learn over time, through practice. But in a few hours, you will be introduced to the basic elements of APIs that you will be able to apply to your own projects. You will need to continue to practice with these concepts to best use them.

Resources

Getting Started with APIs

What is an API? An API or Application Programming Interface is something that a website or online service designs to make some of their data available to the public, for use in applications or other purposes. Most web services have an API – Facebook, Yelp, Twitter… they all have ways to access their public data. Although some APIs are open, you usually have to do something to sign up for access to an API, and then you are granted access credentials to use in your code. You can use APIs to get data, as well as to connect them to applications that you create that use their data.

Open APIs

Some APIs are public and don’t require an authentication process to use them. For example, visit the Dog API. This is a public API about dogs. On it, you can use it to put a random picture of a dog on a website, as well as get info about breeds and sub-breeds.

If you put the url "https://dog.ceo/api/breeds/image/random" in the address bar of a browser, you will see that it generates a "message" with a different image url each time you refresh the browser.

See the code. Using the JQuery function $.getJSON, we can make a request for the picture to be used on a website (notice the JQuery library referenced in the head of each code sample). The comments explain more of the functionality.

The second code sample integrates the functionality into a function so it can be called on an event, when a button is clicked. Try each example.

Code Sample -

Add a Button

This code modifies the script above by putting it in a function and calling the function when a button is clicked.

Read from a JSON API

Quite often, an API is in the form of JSON data. If you understand the data's structure, you can create a for loop to read it into the DOM, much like we have done previously with local data. Visit the link http://api.open-notify.org/astros.json. This provides a list of astronauts currently in space. The code sample appends both the name and the craft of each astronaut into a list, separated by a comma. Remember, you could modify this script to have the data in a table.

Code Sample -

API Requiring Authentication

The code sample uses the OpenWeather Map API to get the weather from a city. This API requires you to sign up to get access to an API key that you will use in the script.

City Weather with Dropdown

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<h2>Weather App</h2>
<select id="thedropdown" onchange="getWeather()">
<option>Select a City</option>
<option value="Austin">Austin</option>
<option value="San Antonio">San Antonio</option>
<option value="Dallas">Dallas</option>
</select>

function getWeather() {
// makes city into a variable
city = document.getElementById("thedropdown").value;

document.getElementById("mycity").innerHTML = city + " Weather";
document.getElementById("myweather").innerHTML = " ";

//getJSON JQuery function that makes an API request
//concatenates city variable from the dropdown
$.getJSON('https://api.openweathermap.org/data/2.5/weather?q=' + city + ',us&units=imperial&appid=YOUR-KEY-HERE', function(data) {

var icon = "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
var temp = data.main.temp;

//DOM manipulation for selected city
document.getElementById("myweather").innerHTML = "<img src=" + icon + " />" + temp + "° F";

});
}
</script>

</body>
</html>

Moving On

Now you have a basic understanding of API concepts. Practice using these techniques and do some research on how to use other APIs.