Welcome back to another week of learning to code. This week we will dig a little more into some JQuery methods and begin working directly with an API. Until now, we have used the Yahoo Query Language too simplify the task of interacting with the Google API. Today we will begin interacting with the Alpha Vantage API, which offers real-time and historical stock quote information. This API has a very low barrier to entry, which makes it ideal for a learning environment. Today we will build a simple app that will allow a user to query the API for information on a particular stock. So, let’s get started.

Below is the necessary HTML that we will need for our app. By now, this should all be looking very familiar. We have a form with one input for the users search term and a button to call our searchStock() function. Again, we are using Bootstrap to style the page and using a script tag at the bottom of the document to download JQuery library. Now, let’s get into the meat of our JavaScript.

Before we begin, we must first get an API key from Alpha Vantage.  Once we have our API key, we can reference it in out JavaScript file. In the below code, you will replace [Enter API Key Here] with the key you get from Alpha Vantage. It is important to note, that you should never make any keys public. So, if you plan pushing this to your GitHub, make sure to take your key out. In later tutorials we were go over some best practices for API keys when we begin our introduction into Node.js. For now, just keep your key in a safe place and DO NOT MAKE IT PUBLIC.

Now that we have our key, we can look at how to use it with the given API. Each API will work slightly differently, so it is important to read the documentation. Look through the Alpha Vantage documentation. Notice that their are a lot of different functions we can call to get different stock information. On the left-hand menu click ‘Quote Endpoint’. This function will give us some basic information on a specific stock. The example JSON for Microsoft (MSFT) shows the data that will be returned from this function. Notice, that in our JavaScript we set this function call into the variable alphavantageAPI.

Now, let’s start looking at our searchStock() function. We begin by referencing the table named output and the div tag named message. As before, we want to clear out the innerHTML in case of the user resubmitting the form. We also want to reference the stockSymbol that the user has typed in to the search box. Now, we begin looking at some more JQuery functionality. Remember, the dollar sign is the same as typing ‘JQuery’. So, $.getJSON could also be typed as JQuery.getJSON.

The getJSON() method is a shorthand way of calling the same Ajax method that we used last week. In this example, our first argument is the URL, which is a concatenation of our function call to the API, the symbol from our user, and our API key. The second argument is the success function that will be called on the data returned from the URL. We then create an empty array that will hold our HTML that we will eventually append to the output table. Our first element of this array will be the header for our table, which will include the stock symbol that our user has typed in. Here, we are again using template literals. Now, we want to show all the stock info to our user as rows in the table. So, we use the .each() JQuery method to iterate over the data and create cells for each key value pair in our JSON. Lastly, we want to present the user with an error message if no data is returned (i.e. the user typed in a bad stock symbol) and append our header and rows to the output table.

Throughout this short tutorial you have learned a little more JQuery functionality and how it can be used to simplify an HTTP request. Next week will add some more functionality to this little app to make it more responsive. Stay tuned. If you have any questions, please use the comment section below. Remember to share this post on your favorite social media platform. Thanks for stopping by, and I will see you all again next week.

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