Part 1 - Building an app that displays data from different financial markets using Jquery and a Public API

In my last post, I introduced a new tutorial series where we will be building an app that displays data from different financial markets.

This post marks the first part of that series and in this post we will be building the landing page for our app.

I had talked about the features to be included in the app before in my last post, if you haven't read it yet be sure to read it before continuing with this post, link will be placed at the end of this post.

Our landing page is going to contain a summarized tabulated view of real-time prices and other data of assets from all the markets that were mentioned in the last post.

The price list will be paginated too and will be displayed in batches of 10, the view will also be mobile responsive.

To start, create a project folder and in the folder, add an index.html file and a sub-folder named css.

I used a Bootstrap tab template to create the tab used in displaying all data in the file.

The code for the tab template can be found on Bootsnipp

I'm not going to go deep into the layout markup as we'll mostly be dealing with the JavaScript code.

In the index.html file, paste the HTML code you find on the page in the link shared in the last paragraph.

In the css folder, create a file index.css and paste the HTML code you find on the page in the link shared in the last paragraph.

Include the css file in your HTML folder by pasting this code in the HTML <head> tag.

<link href="./css/index.css">

Save both files and load your HTML page in the browser, you'll have something of this fashion

enter image description here

I am going to be using the tab with the blue background for my landing page, you can go ahead an choose the one that suits you.

After choosing the one that suits you, your landing page should look something like this.

enter image description here

Now that we have that set up, we can move on to the next addition to our application.

As I have mentioned before, we will be displaying real-time prices of assets from some markets.

As mentioned in the previous tutorial we are going to be using the Financial Modelling Prep API to pull all the data we need to populate our app.

In order to pull data from our API we need to include Axios in our project.

To import Axios in our project, add the following code in the <head> tag of your index.html file.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Save the file then create a new sub-folder in the project folder, give it the name js.

In the js folder, add a new file index.js.

Import the index.js in your index.html file with this code in the <head> tag of your index.html file

<script src="./js/index.js"></script>

We are done setting up all the preliminaries for the landing page.

Stock Prices

The first data we'll be displaying is the stock price list.

In index.html replace the value for one of the tab panes with Stocks. So that your new landing page will look something like this.

enter image description here

In index.js, we need to firstly retrieve the stock price list from the API.

To do that we will make an API call with the following code, add it in your index.js file

$(document).ready(function() {
    axios.get('https://financialmodelingprep.com/api/v3/real-time-price').then(response => {
        console.log(response.data);
    }).catch(err => {
        console.log(err);
    });
})

Save all files and reload the landing page in your browser. Open the browser console and you should get a result as follows

You should have results similar to the one in the image below

enter image description here

After outputting the API call response in the console, we need to display it on the page.

In order to display the stock prices on the landing page we have to use a table.

In your index.html file. Look for the section that houses the tab content for Stocks. In my own file the element responsible for that has the id tab1primary. Paste the following code in that element

<table id="fresh-table" class="table">
   <thead>
    <th data-field="price" data-sortable="true">Price</th>
    <th data-field="symbol" data-sortable="true">Symbol</th>
   </thead>
   <tbody id="stock-list"></tbody>
</table>

In your index.js file replace the line console.log(response.data); with the following code

const stockList = response.data.stockList;

        let pageStockList = ``

        stockList.forEach(oneStock => {
            const price = oneStock.price;
            const symbol = oneStock.symbol;

            const oneRow = `<tr>
                                <td>${symbol}</td>
                                <td>${price}</td>
                            </tr>`;

            pageStockList = pageStockList + oneRow;                
        })
        $('#stock-list').html(pageStockList)

After editing the index.js file you can then save all files and check your landing page.

You should see something that looks like this image

enter image description here

In my next post, I will be implementing pagination for the list we created and I'll also be adding a realtime list for another market.

If you have read to this point, thank you for the resilience, you are the best.

Links to other posts in the series