Server Side Station

Tutorial

On this page we will go through the steps of getting and using data from an API. We will explain and show the coding process.

First, read the documentation to determine if the website you're using needs a API key. If so, obtain a key first because you will need it for authentication purposes.

Next, go back to the site's documentation page and find the URL for making API requests.

Now, we will open our JavaScript file and create a variable to hold our API Key (if needed) and log the variable to the console to make sure it assigns correctly.

                    
    //assign the API key to a variable and log it to the console
        var apiKey = 'insert_your_api_key_here';
        console.log(apiKey);
                            

After that, we will make two more variables: one to select the element where we want to insert the data, and the other to hold the URL to use in the fetch() method.

                    
    //assign the URL to a variable for use in the API call and select the container used to display the data
        var apiUrl = 'https://api.openbrewerydb.org/breweries?by_city=san_diego'
        var breweryContainer = document.getElementById('breweryContainer');
                    

The next step is to use the fetch() method to retrieve information from the API. To use the fetch() method, we insert the API URL into the parentheses and append .then (referred to as a promise) with a function inside to handle the response. Inside that function, we will convert the response into a JSON object and return it so we can manipulate the data.

                    
    //fetch the data from the API and convert the response to JSON
        fetch(apiUrl)
            .then(function (response) {
                return response.json();
            })
                    

In order to get the data into an array, we will append another .then promise containing a function with (data) as the parameter.

                    
    //fetch the data from the API
        fetch(apiUrl)
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {

            });
                    

Inside the {} of that function we will see if our API call was successful by console logging the data array.

                    
    //fetch the data from the API
        fetch(apiUrl)
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                console.log(data);
            });
                    

Let's make a for loop and create some elements to display the items in the array on the page. We will create an unordered list with links to the first 5 breweries contained in the data array.

                    
    //fetch the data from the API
        fetch(apiUrl)
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                for (var i = 0; i < 5; i++) {
                    var breweryName = data[i].name;
                    var breweryUrl = data[i].website_url;
                    var newLi = document.createElement('li');
                    newLi.innerHTML += ("<a href='" + breweryUrl + "'>" + breweryName + "</a>");
                    breweryContainer.append(newLi);
                }
            });
                    

Click the button below to see the code run!

Test your knowledge by taking the quiz below! Once you're finished, check out the Demo page.