01-fetchResults()

In this module, we'll stub out the function that is fired when the 'submit' event happens.

fetchResults()

To get started, it's best to stub out the function. We'll do that under all of our variables as a function declaration:

function fetchResults(e){
    console.log(e);
}

Accessing a REST API

To access the API, we need to make a target request to its URL. Our small search form in the html file contains everything we need to create that url. Enter the following code first, then we'll talk about what exactly it's doing.

                    //1
function fetchResults(e) {
  console.log(e); //2
  // Assemble the full URL
  url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value; //3
  console.log(url); //4
}

function nextPage(){
  console.log("Next button clicked");
} //5

function previousPage(){
  console.log("Next button clicked");
} //5

Here's some analysis of the above code: 1. The little (e) is part of something in Javascript called an event handling function. Every event handling function receives an event object. For the purpose of this discussion, think of an object as a "thing" that holds a bunch of properties (variables) and methods (functions). The handle, the e, is similar to a variable that allows you to interact with the object.

1. We are logging the event object so that you can look at it in the console for learning purposes.

2. We are creating a versatile query string. The url variable is loaded with other variables and url requirements. We have our base for the API, our key, the page number that corresponds to the results array, and our specific value. Something to study on your own might be: ?, &, and &q= in a URL string. What are those?

3. We log the string so that we can see it. Later on, you can try another search and see how it changes.

4. We add in a few basic functions to define nextPage and previousPage and log them. If you leave out this step, your app will get an error.

Endpoint Review

Remember that when we fetch data from an API, we make a request for some kind of data to a specific point. That point is called an endpoint and comes in the form of a URL. That URL is the gateway to the server, which ultimately does the logic of looking for the proper data in the database. In the code above, we use the endpoint, the baseURL, and add our query string to it so that it can access the proper data.

Results

Here's what we should be seeing at this point:

Fetch Result

NOTE: Right now, our button is attempting to submit the search form, but we don't have anywhere for it to send it to. This just causes the page to refresh, which will prevent you from seeing the result shown here. In order to see the search string, go into the settings of the console and select "Preserve Log". This will keep the log after a refresh instead of disposing of it. In the next module, we'll cover a way to prevent the button from trying to submit the form, which will render this step moot.

Further Study

As you're digging into the Event object, do some cross-referencing with this source.

Helpful Table

Here's a helpful table to refer back to when using this API:

Parameter	Purpose
baseURL	The actual web address for the API
apiKey	Your key allowing you access into the API
page	The current page of results being accessed
q	This is the search term, or query, that we are looking for in the API
begin_date	The earliest (furthest away) date from which we want to see articles
end_date	The latest (most recent) date from which we want to see articles