Company Key Metrics API Integration using Javascript

Company Key Metrics API Integration using 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;
}

.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 symbolName = 'Facebook Inc.';
 var symbol = 'AAPL';
 document.addEventListener('DOMContentLoaded', () => {
   // https://financialmodelingprep.com/developer/docs
   getRequest(
     'https://financialmodelingprep.com/api/v3/company-key-metrics/' + symbol + "?apikey=demo",
     drawOutput
   );

   function drawOutput(responseText) {
     let resp = JSON.parse(responseText);
     let symbol = resp.symbol;
     let financials = resp.metrics;

     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");

     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);

       for (var key2 in financial) {
         if (financial.hasOwnProperty(key2)) {
           let $eletd = document.createElement("td");
           $eletd.textContent = financial[key2];
           $line.appendChild($eletd);
         }
       }
       $body.appendChild($line)

       $table.appendChild($body);

     }

     document.body.appendChild($table);
   }

   function getRequest(url, success) {
     var req = false;
     try {
       req = new XMLHttpRequest();
     } catch (e) {
       try {
         req = new ActiveXObject("Msxml2.XMLHTTP");
       } catch (e) {
         try {
           req = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
           return false;
         }
       }
     }
     if (!req) return false;
     if (typeof success !=...