Company Key Metrics Value API integration VueJS table axios JSON

Company Key Metrics Value API integration VueJS table axios JSON

by Financial Modeling Prep

HTML

<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/v-data-table/dist/v-data-table.js"></script>
<div id="app">


  <div @click="open()" class="stock-search-component-small">
    <div class="stock-search">
      <input v-model="search" class="search-box" placeholder="Search stock..." title="Search for stock information" />

      <div class="icon-search-wrapper">
        <i class="fas fa-search"></i>
      </div>
    </div>

    <div v-if="searchTickers.length && show" @click="clear() && hide()" class="stock-search-result">
      <a :href="`/financial-summary/${stock.symbol}`" v-for="(stock, index) in searchTickers" :key="index" tag="div" class="search-result-item">
        <div class="search-result-image">
          <img :src="getStockImage(stock.symbol)" :alt="stock.name" />
        </div>

        <div class="search-result-name">
          <strong>{{ stock.symbol }}</strong> |
          <strong>{{ stock.company_full_name }}</strong> |
          <strong>{{ stock.exchange }}</strong>
        </div>
      </a>
    </div>
  </div>
</div>

SCSS

body {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  color: #444;
  margin: 0;
}

table {
  width: 100%;
  border: 2px solid #42b983;
  border-radius: 3px;
  background-color: #fff;
}

th {
  background-color: #42b983;
  color: rgba(255, 255, 255, 0.66);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

td {
  text-align: center;
  background-color: #f9f9f9;
}

th,
td {
  min-width: 120px;
  padding: 10px 20px;
}

th.active {
  color: #fff;
}

th.active .arrow {
  opacity: 1;
}

.arrow {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66;
}

.arrow.asc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
}

.arrow.dsc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
}

input {
  outline: none;
}

input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  font-family: inherit;
  font-size: 20px;
}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
  display: none;
}

input[type=search] {
  background: #ededed url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
  border: solid 1px #ccc;
  padding: 9px 10px 9px 32px;
  width: 300px;
  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  border-radius: 10em;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

input[type=search]:focus {
  width: 400px;
  background-color: #fff;
  border-color: lightseagreen;
  -webkit-box-shadow: 0 0 5px rgba(109, 207, 246, 0.5);
  -moz-box-shadow: 0 0 5px rgba(109, 207, 246, 0.5);
  box-shadow: 0 0 5px rgba(109, 207, 246, 0.5);
}

input::-webkit-input-placeholder {
  color: #999;
}

input:-moz-placeholder {
  color: #999;
}

caption {
  display: none;
}

.stock-search-component-small...

JavaScript

// https://financialmodelingprep.com/developer/docs
var stock = 'NFLX';

var app = new Vue({
  el: "#app",

  data() {
    return {
      search: '',
      timeout: null,
      show: false,
      searchTickers: [],
    }
  },

  watch: {
    search(val) {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.show = true

        this.fetchResults(this.search, 10)

      }, 500);
    }
  },
  methods: {
    open() {
      this.show = true
    },
    hide() {
      this.show = false
    },
    clear() {
      this.search = ''
    },
    getStockImage(symbol) {
      return `https://financialmodellingprep.com/images-New-jpg/${symbol.toUpperCase()}.jpg`
    },
    async fetchResults(symbol, count) {
      if (!symbol) this.hide();
      const {
        data
      } = await axios.get(`https://financialmodellingprep.com/api/v3/symbol/search/autocomplete?query=${symbol}&limit=100`)
      this.searchTickers = data
    }
  }
});