Financial Statement API integration with Javascript

Financial Statement API integration with Javascript

by Financial Modeling Prep

HTML

<div class="stock-name"></div>

CSS

body {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  color: #444;
  margin: 0;
}

.table {
  width: 100%;
  border: solid 1px #DDEEEE;
  border-collapse: collapse;
  border-spacing: 0;
  font: normal 13px Arial, sans-serif;
  width: 100%;
}

.table thead th {
  background-color: #f1efb8;
  border: solid 1px #DDEEEE;
  color: #336B6B;
  padding: 10px;
  text-align: center;
  text-shadow: 1px 1px 1px #fff;
}

.table tbody td {
  border: solid 1px #DDEEEE;
  color: #333;
  padding: 10px;
  text-shadow: 1px 1px 1px #fff;
  min-width: 80px;
  text-align: center;
}

/* .stock-name {
  padding: 10px;
} */

JavaScript

var symbol = "AAPL";

 document.addEventListener('DOMContentLoaded', () => {
   // https://financialmodelingprep.com/developer/docs
   getRequest(
     'https://financialmodelingprep.com/api/v3/financials/income-statement/' + symbol + '?apikey=demo',
     drawOutput
   );

   function drawOutput(responseText) {
     let resp = JSON.parse(responseText).financials;
     let financials = resp;
     let $table = document.createElement("table");
     $table.className += " table";

     var elements = document.querySelectorAll('.stock-name')[0];

     let $head = document.createElement("thead");
     let $body = document.createElement("tbody");

     let $lineHader = document.createElement("tr");

  /*    let $elefirst = document.createElement("th");
     $elefirst.textContent = 'Fiscal';
     $lineHader.appendChild($elefirst); */

     for (let i = 0; i < financials.length; i++) {
       let financial = financials[i];
       let $line = document.createElement("tr");


       for (var key in financial) {
         if (i === 0 && financial.hasOwnProperty(key)) {
           let $ele = document.createElement("th");
           $ele.textContent = key;
           $lineHader.appendChild($ele);
         }
       }

       $head.appendChild($lineHader);
       $table.appendChild($head);
       var z = 0;
       for (var key2 in financial) {
         if (financial.hasOwnProperty(key2)) {
        /*    if (z === 0) {
             let title = Object.keys(resp)[i];
             let $eleTile = document.createElement("td");
             $eleTile.textContent = title;
             $line.appendChild($eleTile);
           } */
           let $eletd = document.createElement("td");
           if (z === 0) {
           	$eletd.textContent = financial[key2];
           } else {
             $eletd.textContent = financial[key2];
           }
           $line.appendChild($eletd);
         }
         z++;
       }
       $body.appendChild($line)

       $table.appendChild($body);

     }

    ...