javascript - 从 alpha vantage 解析 json 数据

Question

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

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

<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>