curl https://financialmodelingprep.com/api/v3/quotes/crypto
[ {
  "symbol" : "MCAPUSD",
  "price" : 0.00462742,
  "changesPercentage" : 0E-8,
  "change" : 0.00462742,
  "dayLow" : 0E-8,
  "dayHigh" : 0E-8,
  "yearHigh" : 0.01097000,
  "yearLow" : 0E-8,
  "marketCap" : 48541.00000000,
  "priceAvg50" : 0E-8,
  "priceAvg200" : 0.00318208,
  "volume" : 0,
  "avgVolume" : 0,
  "exhange" : "CRYPTO"
}, {
  "symbol" : "DCRUSD",
  "price" : 18.87349900,
  "changesPercentage" : -5.21000000,
  "change" : -1.03820100,
  "dayLow" : 18.37211800,
  "dayHigh" : 20.02625700,
  "yearHigh" : 39.91658400,
  "yearLow" : 12.81343000,
  "marketCap" : 203585248.00000000,
  "priceAvg50" : 19.91170000,
  "priceAvg200" : 21.52632900,
  "volume" : 97878960,
  "avgVolume" : 15785003,
  "exhange" : "CRYPTO"
}, {
  "symbol" : "QASHUSD",
  "price" : 0.04980273,
  "changesPercentage" : -6.20000000,
  "change" : -0.00329335,
  "dayLow" : 0.04969777,
  "dayHigh" : 0.05481281,
  "yearHigh" : 0.17513907,
  "yearLow" : 0.03996961,
  "marketCap" : 17430956.00000000,
  "priceAvg50" : 0.05309608,
  "priceAvg200" : 0.07735512,
  "volume" : 241751,
  "avgVolume" : 231043,
  "exhange" : "CRYPTO"
},
{...}
]

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