Using Javascript Fetch() to grab Yahoo Finance API
API or Application Programming Interfaces are difficult to wrap your head around at first, in fact whenever I would hear the phrase or term coined and said in conversation, I just brushed it aside. I did not understand what it was, it seemed far beyond my own understanding but it’s actually a lot easier. To break down, here’s the definition from the Mozilla documentation:
“Application Programming Interfaces (APIs) are constructs made available in programming languages to allow developers to create complex functionality more easily. They abstract more complex code away from you, providing some easier syntax to use in its place.”
“As a real-world example, think about the electricity supply in your house, apartment, or other dwellings. If you want to use an appliance in your house, you plug it into a plug socket and it works. You don’t try to wire it directly into the power supply — to do so would be really inefficient and, if you are not an electrician, difficult and dangerous to attempt.”
To simply put, APIs are like the in-between for the user and the server or database that they’re trying to access or pull and push information to and from. Just like the electrical outlet example, you are connecting to the outlet and not directly to the power source itself. Another way to look at it is if you were wanting to use write code for 3D graphics, the complicated code could be abstracted behind code that is easier to utilize and understand rather than having to write the code yourself to say interact with the graphics card directly. It is almost like a governing middleman between developers in order to access one another’s code to create more applications. Often in the gaming industry, the developers will release their game’s API so that third-party developers can create mods or addons for the game that enhance or changes a player’s experience. Think of it like handing them a set of instructions of how to interact with their game or application.
Now with that out of the way, let’s continue onto the next part! Which is to grab stock information from the Yahoo Finance API, which was public in the past, but due to some issues it’s been made private. But don’t fret, there are still ways to access it and for my little project, I was able to do it for free. If you were to host a website with thousands of visits, you may have to pay to access the API multiple times. After some searching on the world wide web, I found Rapidapi.com and it provided a simple way to search for an API you wanted, subscribe to it and access it. Of course you must make an account, but everything seemed verified with the website and there are many other websites that provide a similar service of finding APIs.
As you can see from above, the website provides a method in finding the API you want, in my case Yahoo Finance, and as well as offering code snippets in multiple languages. It also helps with providing endpoints for what data you want to retrieve. On the sidebar to the left, there is “market, stock, news, conversation” which provide a drop-down menu in order to access specifically what you want. For example, if you want the market information for a certain stock, it will provide a URL directly to that stock and to that information that will be used in your fetch request. Also near the top of the webpage you’ll see “pricing”, this redirects you to a subscription to the API where you’ll need to subscribe(don’t worry, there’s a free option for small or personal projects) and then you’ll be provided with a unique API key.
Now onto the method of grabbing the data, as I mentioned before there are multiple languages and multiple methods of retrieving the API. For this example, we’ll be using Javascript’s Fetch() method, it is very simple and straight-forward. Again, we will quote the Mozilla documentation as to what fetch() is:
“Fetch provides a generic definition of
RequestandResponseobjects (and other things involved with network requests). This will allow them to be used wherever they are needed in the future, whether it’s for service workers, Cache API, and other similar things that handle or modify requests and responses, or any kind of use case that might require you to generate your responses programmatically (that is, the use of computer program or personal programming instructions).”“The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global
fetch()method that provides an easy, logical way to fetch resources asynchronously across the network.”
Javascript also has a few other methods such as jquery and axios but we won’t go over them. So, from my example provided you will start with the fetch method itself and provide it two arguments. First, the url of where you want to grab the API from or “fetch” it from and the next a set of instructions that you want to apply to the request. You will then jsonify the fetch request afterwards with a .then function, that will take the data from the fetch request and convert it into a readable object in javascript, next you will use another .then function to give do something with the new javascript object! So, let’s get down to brass tax and see how this is written in code.
First we are fetching from the API url provided from Rapidapi, as you can see it begins with apidojo as that’s the user that’s providing the API within the Rapidapi service. If you read more closely, I am pulling from the market section and getting market data quotes from 4 symbols, AMC, GME, NOK, and BB. Next I am using .then() method which has a function inside of it that returns the response from the API fetch and jsonifies it into an object. After that line, I am using .then() once which, surprise, also has another function. Except, this function that the returned response data, in which case is named “stocks” and then first it console.logs it so that I am able to debug whether or not it is actually grabbing the data and providing an object.
Which it does, perfect! It provides an object that contains all the market data from the 4 symbols that I wanted. If I were to expand either object from 0 to 4, I would be a lot of data, such as market price, closing price, ect. Now to the next part of my second .then method, I want to grab only the 4 objects from the nested quoteResponse object and to do that, I use dot notation. Let’s take a closer look and break it down further.
I take the stocks variable, which is the jsonified object of the data that I grabbed from the API, I then go into the quoteResponse object, then into the result and then for each of the 4 objects within the result object, I run a forEach loop that processes each object into an arrow function called stocksList(). The stocksList() function will iterate over each object 0, 1, 2, 3, and do a set of instructions to each one. And this also passes the stock variable into the function. Whew! That was a lot, and we’re almost done. At the end I include a .catch() method that is optional, but it will return an alert if there was a problem grabbing the API and since our entire application depends on the API fetch being successful, it will alert us before we get too ahead of ourselves.
Now onto the second parameter, which I named “configuration.” Configuration is a variable I used that contains all the information for the fetch request, such as the API key that we need in order to access the API.
Most of the information was grabbed from rapidAPI and it works so I did not mess around with it, however if I were to break it down then the “method” is the style of the request. We are using a GET request to get the data. The headers perform actions on the fetch request, in our case, using our rapidAPI key and the apidojo host. The last three lines I am not so sure, but it works and that’s all I needed it to do.
For the last thing, I will show what I did in my stocksList() function to give an example of what to do with the jsonified data other than consolelogging it.
Here we are selecting the div in our HTML file that has the list-panel ID and then we are creating an ordered list element named stockTitle. Next we are creating an ID for the stockTitle using our stock javascript object that we grabbed from the fetch request. There is a nested object of symbol within the stock object that will tell us if we are using AMC, GME, NOK or BB. Next we set the stockTitle element’s inner text to that same nested object of symbol and then we append it to the list-panel. All in all, it will look like this as the end product!
You can see our list-panel on the left side of the webpage and it does in fact list all four symbols! Now with a lot more code involved, I also included an event handler that when you select one of the symbols, in this case AMC, it will display the market data that I want. So put it quickly, I also used the same object and instead of grabbing symbol, I grabbed currentPrice or marketChange objects that were nested in our larger stocks object that was grabbed from our fetch() request! Then I plotted those on a chart and that took longer than I care to admit, but that’s for another blog post.
That was a lot more than I initially thought, but thank you for reading and keeping up with it! To me, it appears like a garbled mess, but I was happy to write down my thoughts and hopefully it is coherent in some aspect! I may further and heavily edit this to make it more readable.
