javascript - Alpha Vantage Json 数据获取和显示示例

Question

有人可以向我展示一个关于如何从 Alpha Vantage 获取数据而不是通过 JavaScript 显示数据的代码示例吗？

我在显示 json 数据时遇到问题。

Answer 1

我根据在 stackoverflow 上找到的另一个代码编辑了这段代码。

希望对您有所帮助。

var theURL = "https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=MSFT&interval=1min&apikey=demo";

$(document).ready(function() {
  $("#stockIndicator").show();
  doAjax(theURL);

  $('.ajaxtrigger').click(function() {
    $("#stockIndicator").show();
    doAjax(theURL);
    return false;
  });

  function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
  }

  function doAjax(url) {
    $.ajax({
      url: url,
      dataType: 'json',
      contentType: "application/json",
      success: function(data) {

        var symbol = data['Meta Data']['2. Symbol']
        var lastRefreshed = data['Meta Data']['3. Last Refreshed']
        var lastTradePriceOnly = data['Time Series (1min)'][lastRefreshed]['4. close']
        var lastVolume = data['Time Series (1min)'][lastRefreshed]['5. volume']

        $('#stockSymbol').html(symbol);
        $('#stockAsk').html(lastTradePriceOnly);
        $('#stockVolume').html(numberWithCommas(lastVolume));
        $("#stockIndicator").hide();
      }
    });
  }
});

#stockIndicator {
  text-align: left;
  padding: 10px;
  margin: 5px;
  color: red;
}

.ajaxtrigger:hover {
  cursor: pointer;
  cursor: hand;
}

#stock_miniQuote_head {
  background-color: #464A55;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}

#stock_miniQuote {
  border-bottom-color: #DDDDDD;
  border-bottom-left-radius: 5px 5px;
  border-bottom-right-radius: 5px 5px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: #DDDDDD;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: #DDDDDD;
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: initial;
  border-top-style: none;
  border-top-width: initial;
  list-style-type: none;
  margin-bottom: 10px;
  padding-bottom: 0;
  padding-top: 10px;
  vertical-align: text-top;
  height: 100%;
  width: 99%;
}

.stock_divider {
  border-bottom: 1px solid #B2B0AD;
  padding-bottom: 5px;
}

#stock_left {
  float: left;
  width: 35%;
  height: 50px;
  border-right: 1px solid #B2B0AD;
  padding: 0 15px;
}

#stock_right {
  float: right;
  width: *;
  padding: 0 20px;
  vertical-align: text-top;
}

.stock_label {
  font-size: 14px;
}

.stock_strong {
  font-size: 17px;
}

#stock_body {
  padding: 10px 0 15px;
}

#stock_body_content {
  float: left;
  width: 170px;
  padding: 0 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stock_miniQuote_head" class="ajaxtrigger"><span id="stockSymbol"></span>&nbsp;(common stock)</div>

<div id="stock_miniQuote">
  <div id="stockIndicator">
    <p>Retrieving stock information...</p>
  </div>


  <div class="stock_divider">

    <div id="stock_left">
      <span class="stock_label">Price</span><br/>
      <strong class="stock_strong">$<span id="stockAsk"></span></strong><br/>
    </div>


    <div id="stock_right">
      <span class="stock_label">Change</span><br/>
      <strong class="stock_strong"><span id="stockChange"></span></strong><br />
      <strong class="stock_strong"><span id="stockChangePercent"></span></strong><br />
    </div>
    <div style="clear: both;"></div>


  </div>

  <div id="stock_body">

    <div id="stock_body_content">
      <span class="stock_label">Volume</span><br/>
      <strong class="stock_strong"><span id="stockVolume"></span></strong>
      <br /><br />
      <span class="stock_label">Average Daily Volume</span><br/>
      <strong class="stock_strong"><span id="stockAvgVolume"></span></strong>
      <br /><br />
      <span class="stock_label">52 Week Range</span><br/>
      <strong class="stock_strong"><span id="stockRange"></span></strong>

    </div>

    <div style="clear: both;"></div>

  </div>



</div>