Stock Market Most Loser Companies API integration with JAVASCRIPT.

Stock Market Most Loser Companies 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;
}

.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

document.addEventListener('DOMContentLoaded', () => {
  // https://financialmodelingprep.com/developer/docs
  getRequest(
    'https://financialmodelingprep.com/api/v3/stock/losers',
    drawOutput
  );

  function drawOutput(responseText) {

    let resp = Object.values(JSON.parse(responseText).mostLoserStock);


    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 < resp.length; i++) {
      let financial = resp[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 != 'function') success = function() {};
    req.onreadystatechange = function() {
      if (req.readyState == 4) {
        if (req.status === 200) {
          success(req.responseText)
        }
    ...