curl https://financialmodelingprep.com/api/v3/key-metrics/AAPL
[ {
    "symbol" : "AAPL",
    "date" : "2021-09-25",
    "period" : "FY",
    "revenuePerShare" : 21.90354123925411,
    "netIncomePerShare" : 5.669029281123018,
    "operatingCashFlowPerShare" : 6.229345884552985,
    "freeCashFlowPerShare" : 5.56562398361035,
    "cashPerShare" : 3.750552652516527,
    "bookValuePerShare" : 3.7775565837141025,
    "tangibleBookValuePerShare" : 3.7775565837141025,
    "shareholdersEquityPerShare" : 3.7775565837141025,
    "interestDebtPerShare" : 7.6260059712817085,
    "marketCap" : 2482477053378.728,
    "enterpriseValue" : 2572256053378.728,
    "peRatio" : 26.219656246078664,
    "priceToSalesRatio" : 6.786117248183458,
    "pocfratio" : 23.86125313230481,
    "pfcfRatio" : 26.706798633489267,
    "pbRatio" : 39.34818597842333,
    "ptbRatio" : 39.34818597842333,
    "evToSales" : 7.031537772653343,
    "enterpriseValueOverEBITDA" : 20.889553448047103,
    "evToOperatingCashFlow" : 24.724197441115056,
    "evToFreeCashFlow" : 27.672652344504513,
    "earningsYield" : 0.03813932534487584,
    "freeCashFlowYield" : 0.03744364922668191,
    "debtToEquity" : 1.729370740212395,
    "debtToAssets" : 0.8202574344305731,
    "netDebtToEBITDA" : 0.7291044048856549,
    "currentRatio" : 1.0745531195957954,
    "interestCoverage" : 41.19054820415879,
    "incomeQuality" : 1.0988381918039714,
    "dividendYield" : 0.005827647019057021,
    "payoutRatio" : 0.15279890156316012,
    "salesGeneralAndAdministrativeToRevenue" : 0.0,
    "researchAndDdevelopementToRevenue" : 0.059904269074427925,
    "intangiblesToTotalAssets" : 0.0,
    "capexToOperatingCashFlow" : -0.1065476076049136,
    "capexToRevenue" : -0.030302036264033657,
    "capexToDepreciation" : -0.9823644097837646,
    "stockBasedCompensationToRevenue" : 0.021611898845597662,
    "grahamNumber" : 21.950837680915992,
    "roic" : 0.48309913489209433,
    "returnOnTangibleAssets" : 0.26974205275183616,
    "grahamNetNet" : -10.97841529675105,
    "workingCapital" : 9355000000,
    "tangibleAssetValue" : null,
    "netCurrentAssetValue" : -153076000000,
    "investedCapital" : 1.9768426058012363,
    "averageReceivables" : 44475500000,
    "averagePayables" : 48529500000,
    "averageInventory" : 5320500000,
    "daysSalesOutstanding" : 51.390968708397914,
    "daysPayablesOutstanding" : 93.85107122231561,
    "daysOfInventoryOnHand" : 11.27659274770989,
    "receivablesTurnover" : 7.102415252591931,
    "payablesTurnover" : 3.889140478060004,
    "inventoryTurnover" : 32.367933130699086,
    "roe" : 1.5007132667617689,
    "capexPerShare" : -0.6637219009426348
  }, ...
]

 document.addEventListener('DOMContentLoaded', () => {
   getRequest(
     '',
     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);

     }

     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 != 'function') success = function() {};
     req.onreadystatechange = function() {
       if (req.readyState == 4) {
         if (req.status === 200) {
           success(req.responseText)
         }
       }
     }
     req.open("GET", url, true);
     req.send(null);
     return req;
   }
 })

$(document).ready(function() {
  var url = "";
  $.ajax({
    url: url,
    type: "GET",
    crossDomain: true,
    success: function(response) {

      let resp = response;
      let symbol = resp.symbol;
      let financials = resp.financials;

      let $table = $("<table  class='table'></table>");
      
      for (let i = 0; i < financials.length; i++) {
        let financial = financials[i];
        let $line = $("<tr></tr>");
        let $lineHader = $("<tr></tr>");
        let $head = $('<thead></thead>');

        for (var key in financial) {
          if (i === 0 && financial.hasOwnProperty(key)) {
            $lineHader.append($("<th></th>").html(key));
          }
        }

        $head.append($lineHader);
        $table.append($head);
        let z = 0;
        for (var key2 in financial) {
          if (financial.hasOwnProperty(key2)) {
            if (z === 0) {
              $line.append($("<td></td>").html(financial[key2]));
            } else {
              $line.append($("<td></td>").html('$' + financial[key2]));
            }
            z++;
          }
        }

        $table.append($line);
      }

      $table.appendTo(document.body);

    },

    error: function(xhr, status) {
      alert("error");
    }

  });
});

var app = new Vue({
  el: "#app",
  data: {
    url: '",
    financials: [],
    loaded: false,
    searchQuery: '',
    stockName: 'Netflix'
  },
  created: function() {
    var self = this
    axios
      .get(this.url)
      .then((response) => {
        this.financials = response.data.financials;
        this.loaded = true;
      })
      .catch((error) => {
        alert('error');
      })
  }
});		

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'table-overview-example',
  styleUrls: ['table-overview-example.css'],
  templateUrl: 'table-overview-example.html',
})
export class TableOverviewExample implements OnInit {
  loaded: boolean = false;
  displayedColumns: string[] = [];
  dataSource: MatTableDataSource<AnimationPlayState>;

  url = '';
  financialStatement: any = [];
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;


  constructor(private http: HttpClient) {

    this.http.get<any>(this.url).subscribe(data => {
      this.financialStatement = data.financials;
      this.createdDisplayComlumn(this.financialStatement[0]);

      this.dataSource = new MatTableDataSource(this.financialStatement);
      this.loaded =true;
    })
  }

  ngOnInit() {
    setTimeout(() => {
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    },1000);
    
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  createdDisplayComlumn(obj) {
    Object.keys(obj).forEach((key,index)=> {
      this.displayedColumns.push(key);
    });
  }
}