curl https://financialmodelingprep.com/api/v3/stock_market/actives
[ {
    "symbol" : "F",
    "name" : "Ford Motor Company",
    "change" : 0.55,
    "price" : 25.02,
    "changesPercentage" : 2.247655
  }, {
    "symbol" : "AAPL",
    "name" : "Apple Inc.",
    "change" : -3.34,
    "price" : 172.19,
    "changesPercentage" : -1.9028065
  }, {
    "symbol" : "LCID",
    "name" : "Lucid Group, Inc.",
    "change" : -4.02,
    "price" : 41.41,
    "changesPercentage" : -8.84878
  }, {
    "symbol" : "AMD",
    "name" : "Advanced Micro Devices, Inc.",
    "change" : -4.73,
    "price" : 132.74,
    "changesPercentage" : -3.4407475
  }, ...
]

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