【发布时间】：2018-09-07 10:52:41
【问题描述】：
我是 Ajax 和 JSON 的新手。我在解析来自 Alpha Vantage API 的 Json 数据时遇到问题。我的项目是在 html5 小部件中使用 jive 平台创建一个股票小部件，并且我有使用 yahoo Finance api 的现有代码。 yahoo api url 不再工作，我发现另一个 api 正在工作并给我 json 数据。我曾尝试使用现有代码，但我遇到的麻烦是如何将代码从 json 数据解析为 html。
控制台在 json 数据的第一行也给了我以下错误，所以我向 url 添加了一个回调，认为它会修复它 Uncaught SyntaxError: Unexpected 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> (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
}
}我做错了什么，我该如何正确地做到这一点？
【问题讨论】：
-
你的意思是让 dataType 'jsonp' 而不是 'json' 来匹配响应格式？
-
我认为倒数第三个括号末尾的逗号会导致问题。
-
@ChrisHappy 是 api 的 json 输出，我缩短了它以节省空间。
-
@Taplar 我已经修改了它，但似乎没有什么不同。
-
你解析过 JSON 吗？我在任何地方都没有看到
JSON.parse(...)。
标签： javascript jquery json ajax alpha-vantage