正在解析来自 alpha vantage 的 json 数据

Question

我是 Ajax 和 JSON 的新手。我在解析来自 Alpha Vantage API 的 Json 数据时遇到了问题。我的项目是在 html5 小部件中使用 jive 平台创建一个股票小部件，并且我有使用 yahoo finance api 的现有代码。 yahoo api url 不再工作，我发现另一个 api 正在工作并给我 json 数据。我曾尝试使用现有代码，但遇到的问题是如何将代码从 json 数据解析为 html。

另外，控制台在 json 数据的第一行给我以下错误，所以我向 url 添加了一个回调，认为它会修复它未捕获的语法错误：意外的标记：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// This version has been tested to work in Jive 4.0.15 and 5.0. It should work in Jive 4.5 but has not been tested
// Add the stock symbol here
  // var yourStockSymbol = 'LIFE';
</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>



<style>

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

</style>


<script type="text/javascript">

if ($('#jive-widgets-browser').css('display') == 'block') {
// Do Nothing as we are in edit mode

} else {
// Build the URL to Alpha Vantage
// var q = escape('select * from yahoo.finance.quotes where symbol in ("' + yourStockSymbol + '")');
var theURL = "https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=0787.HK&interval=1min&apikey=AOIAMG3WFZ8LS58W&callback=?";


$(document).ready(function(){
// Load function on launch
  $("#stockIndicator").show();
  doAjax(theURL);

// Function for refreshing the stock by clicking on the title header
$('.ajaxtrigger').click(function(){
  $("#stockIndicator").show();
  doAjax(theURL);
    return false;
  });

// Function to add commas to numbers for volume
  function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
  }

// Main function to make JSON request to Alpha Vantage for stock information
  function doAjax(url){
  $.ajax({
    url: url,
    dataType: 'jsonp',
    contentType: "application/json",
    success: function(data){
      var s = data.query.results;
          if(s){
      if(s.quote.Change > 0) {
        // Change the change text to green
        $('#stockChange').css({'color': 'green'});
        $('#stockChangePercent').css({'color': 'green'});
      } else {
        // Change the change text to red
        $('#stockChange').css({'color': 'red'});
        $('#stockChangePercent').css({'color': 'red'});
      }

      console.log('s is' + s);

      // This is where we add the JSON values back into the HTML above
      $('#stockSymbol').html(s.quote.symbol);
      $('#stockAsk').html(s.quote.LastTradePriceOnly);
      $('#stockChange').html(s.quote.Change);
      $('#stockChangePercent').html(s.quote.ChangeinPercent);
      $('#stockVolume').html(numberWithCommas(s.quote.Volume));
      $('#stockAvgVolume').html(numberWithCommas(s.quote.AverageDailyVolume));
      $('#stockRange').html(s.quote.YearRange);

      $("#stockIndicator").hide();

          } else {
            var errormsg = '<p>Error: could not load the page.</p>';
      $("#stockIndicator").show();
            $("#stockIndicator").html(errormsg);
          }
        }
      });

  }


  }); //end ready function

} //end first else





</script>

这是json信息

{
    "Meta Data": {
        "1. Information": "Daily Prices (open, high, low, close) and Volumes",
        "2. Symbol": "0787.HK",
        "3. Last Refreshed": "2017-12-07",
        "4. Output Size": "Compact",
        "5. Time Zone": "US/Eastern"
    },
    "Time Series (Daily)": {
        "2017-12-07": {
            "1. open": "0.6700",
            "2. high": "0.6800",
            "3. low": "0.6600",
            "4. close": "0.6600",
            "5. volume": "20488001"
        }
        // More rows
    }
}

我哪里做错了，我该怎么做才正确？

Answer 1

从

中删除&callback=?

var theURL = "https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=0787.HK&interval=1min&apikey=AOIAMG3WFZ8LS58W&callback=?";

并将 dataType :"jsonp" 更改为 dataType :"json"。

var url = 'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=0787.HK&interval=1min&apikey=AOIAMG3WFZ8LS58W';

jQuery.ajax({
    url: url,
    dataType: 'json',
    contentType: "application/json",
    success: function(data){
      console.log(data);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

我认为您的脚本被编码为从 yahoo finance 检索数据。

为了使用ALPHAVANTAGE，我尽力重写了部分代码。请给我一些反馈，我将不胜感激。

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>

正在解析来自 alpha vantage 的 json 数据

parsing json data from alpha vantage

javascript

jquery

json

ajax

alpha-vantage